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Are you 
looking fora 
new.adirection? 
it’s time to 
take_actionQ) 


THE WEB DESIGNER MISSION | 


Welcome 


Be brilliant in 2018 Highlight 


he Web never stands still, technologies 
are ever evolving, trends are evolving, 
techniques are evolving. What does this 
mean? It means that there is always 
something new to learn, something to be 
inspired by, and as we head into 2018 this 
premise still remains the same. 

This issue Web Designer has decided 
that it’s time to bring together the new and 
inspirational to get you ready for the year ahead. Our 
HOT 101 heads out into the industry to get what you 
need to be brilliant in 2018. So what’s on offer? 
Creative heavyweight Tobias Van Schneider reveals 
his five simple tips for design success, creative 
director Tom Wittlin suggests how to power up your 


portfolio and software engineer Simon Jones gives 
an insight into the world of prototyping with Origami. 
This is just the tio of the iceberg. You'll also discover 
16 great free font combinations to help you create 
impressive typography, 10 hand-picked YouTube web 
development channels, what's new in Node 9 and 
four essential eCommerce solutions. We'll also show 
you how to let your imagination run wild with six 
ways to get into creative coding. 

Sitting beside this bonanza of designer and 
developer gold we still have a host of tutorials and 
workshops. Create lush liquid effects with WebGL, 
build web froms with great UX, implement glitch 
effects and much more. Welcome to the latest issue 
and welcome to the new year. Enjoy, 


Zeta are a team of artisans that wield today’s 
digital tools to deliver engaging content. Web 
Designer finds out more. Page 66 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 


Video Tuition - 98 minutes of expert JavaScript video guides 
from Pluralsight (pluralsight.com) 


Assets - 30 Cheerful triangle patterns, and Hope Poster Pop Art Generator 
from Sparklestock (sparklestock.com) 


- Tutorial files and assets 


www -filesilo.co.uk/webdesigner 


welcome 3 


Contributors 


This issue’s panel of experts 


Welcome to that bit of the mag where we learn more 


about the featured writers and contributors... 
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HOT 101 


This issue we have a 
collection of industry experts 
imparting their well-formed 
knowledge on a host of topics 
that will make you a better 
designer and developer in 
2018. Discover design tips 
from Tobias Van Schneider, 
portfolio secrets, how to 
prototype with Origami, 
What's new in Node 9 and 
much more. Page 16 


In broad terms, it (creative coding) refers to the 
production of something that is expressive in nature 
rather than having a purely practical use 


Matt Crouch 


Matt is a frontend developer 
based in London. A 
developer's life is often 


issue, Matt 


Page 46 


Simon Jones 


taken up creating 
run-of-the-mill sites. In this 


shows how those 


Skills can instead help you 
get creative with code. 


* This issue Simon covers 

the basics of Origami Studio, 
a high-fidelity prototyping 
tool from Facebook, which 


enables designers to create 


= sophisticated site and app 


4 Page 60 


Tom Wittlin 


projects, in 
Hoppens s 
issue he of 


prototypes without the 
need for coding. 


Tom is a freelance digital 
creative director and has 
headed a host of design 


cluding Kelly 
ite redesign. This 
fers six rules on 


how to make your portfolio 
Stand out. He also likes to 
wear a scarf. Page 52 


Mark Shufflebottom 


Mark is a Professor of 
Interaction Design at 
Sheridan College. This issue 
he is making waves with 
WebGL. He creates an 
animated liquid background 
effect to make a header that 
reacts to mouse movement. 
Page 84 


Steven Roberts 


Steven is a Frontend 
designer and developer 
from Middlesbrough. His 
recent passion has been 
SVG. This issue he goes a 
little leftfield and selects ten 
YouTube dev channels that 
he uses to help improve his 
Skills. Page 58 


Tam Hanna 


CA 


experts 


Tam has a wealth of 
experience in a breadth of 
different programming 
languages. This issue he 
takes time out to take a 
closer look at Node. He 
reveals five essential 
features that you need to 
know in version 9. Page 56 


Tobias Van Schneider 


Creative heavyweight 
Tobias has worked for some 
of the biggest names in the 
industry, including Spotify. 
This issue the co-owner of 
Semplice reveals five 
essential tips to set you on 
the way to design stardom. 
Page 32 


Luke Harrison 


Luke is a web developer 
from Sheffield, who is all 
about scalable and efficient 
frontend architecture. In this 
issue, he explores how to 
build a web form with great 
UX that works effectively 
across device types. 

Page 90 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch 
steve jenkins@futurenet.com e @WebDesignerMag e www.creativeblog.com 
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contents 


Get the latest must-have resources and videos 


¢°98 minutes of expert JavaScript 
video guides from Pluralsight 

¢ 30 Cheerful triangle patterns 

¢ Hope Poster Pop Art Generator 
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more than convenience, 
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search engines handle 
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Blazing E 


Resources 


Essential libraries and frameworks 


ProFile: Zeta 


Learn the Generate way 
Sign up for the latest Generate 
conference to listen and learn new 
essential skills 


Webkit: The best must-try 
resources out there 

Discover the libraries and frameworks 
that will make your site a better place 
to visit 


Voice search: adapt 

to succeed 

The future of search will voice. Get your 
sites and apps ready to take advantage 


Lightbox 
A showcase of inspirational sites and 
the techniques used to create them 


Hosting listings 

An extensive list of web hosting 
companies. 

Pick the perfect host for your needs 


Next month 
What's in the next issue of 
Web Designer? 


Visit the WEB DESIGNER online shopat 
Ene myfavouritemagazines 


§ myfavouritemagazines.co.uk 
for the latest issue, back issues and specials 


Tutorials 


Learn how to use the three.js library to make a low 
polygon animated liquid wave effect 


Discover the techniques and best practices to create a 
highly optimised UX for all device types 


https://vintage.agency 
Create a text effect to add ambience 


www.tentwenty.me 
Add interest to menu selections with images 


Lightbox: Lady Bird 


Digital artisans get ready to engage Fullscreen video promotes this movie 
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News 


CONTACT US AT: steve.jenkins@futurenet.com | @WebDesignerMag 


Header 


The tools, trends and news to 
inspire your web projects 


Learn the Generate 


conference way 


Sign up for the next Generate conference 
to listen and learn from industry experts 


Ss the web evolves there is Performance Strategies and Techniques; 
Information Architecture for Everybody; 
Essential Web Animation Techniques; and 
An Intro to ReactJUS. Then it’s on to 
Thursday and Friday where you can get to 
see the speakers in action. The first day 
kicks off with Story First: Crafting Products 


That Engage by Donna Lichaw. The 


always something new to 
learn. And what better way 
to boost your skills than by 
listening to the experts. Our very own 
Generate conference is awash with them 
and 2018 sees a host of contemporary, 
must-know topics presented by an 
incredible selection of industry gurus. So 


where can you get to see this fine array of 
talent in the coming year? 

2018 sees not one, but two Generate 
3-day conferences. The first of the year 
kicks-off in the city that never sleeps, New 
York City. To be precise the conference will 
reside at the glorious Metropolitan Pavilion 
in Manhattan's desirable Chelsea 
neighbourhood from Wednesday 25th 
April - Friday 27th April 2018. Check out the 
venue site (Generate will take place on The 
Level) http://bit.ly/2Bjpbbv. 

So what’s happening? The 25th April is 
Workshops day with four separate 
workshops dedicated to Modern Frontend 


morning session continues with How | Cut 
My Working Hours In Half And Somehow 
Managed to Get More Done by developer 
Jason Lengstorf; Choose Your Animation 
Adventure by Val Head; and What’s New In 
JavaScript? by Wes Bos. 

After lunch it’s How To Make Sense Of 
Any Mess by Abby Covert; Using CSS Grid 
In The Real World by frontend developer 
Brenda Storer, and Dan Mall finishing the 


CE] creative ston 


In-depth tutorials, 
expert tips, 
cutting-edge 
features, industry 


a 


or) oe 
e PaDaews 


day off with his Should Designers...? talk. 
Then it’s on to the after-party - the perfect 
time to mingle, make new friends and talk 
to the conference speakers. 

Onto the Friday and the day begins with 
Tragic Design; followed by How The 
Largest Human Rights Organization In The 
World Uses Design Systems To Win On The 


66 The conference will reside at 
the glorious Metropolitan 
Pavilion in Manhattan 99 


Web, Content Strategy For Slow 
Experiences; and Planet Of The APIs. To 
view the full New York line-up head to 
www.generateconf.com/new-york. 

In September 2018 Generate London 
returns to the fabulous Royal Institution for 
three days and is guaranteed to be packed 
with insight, inspiration and practical 
take-aways. To keep up with the latest news 
visit www.generateconf.com/london 


net magazine 
needs an editor 


As the guardian of all content for the 
brand, you'll be working to produce 
this four-weekly title and its digital 
edition, manage its social sites and 
contribute to its web presence. If 


: ; youre hard-working, enthusiastic 
rs ena interviews, and full of creative ideas we’d love to 
— PLs[ilemetn eine hear from you. 
. opinion. Make futurepic.com/ 
aie _ sure to get your job/editor-net- 
5 new 30 parttolios for 2017 you must check daily dose of magazine/ 


hacah Vier esse nar oreo alerenaneitnaionll creativity, design 
and development. 
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STAT 
ATTACK 
FACEBOOK 


How popular is 
the social media 
platform around 
the world? 


Europe 


78.17% 


Pinterest sits second 
at nearly 10% 
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North America 


66.17” 


The continent where 
FB is the least popular 


Africa 


82/92 


Twitter only gets 
just over 3% 


54.6 


YouTube comes in 
second with 5% 


Pinterest sits 
60% behind 


Source: gs.statcountercom 
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Sites of the month 


01. 


\] Next person 
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Folk. Inspired by 
Marikha 


We shape brand strategies that are 
inspired by people. 


SOIGNLS 


O1. Folk 


folkstrategies.com/en 
Canadian creatives combine smart user 


interaction with cool colours and design. 


O02. Super Crowds 


supercrowds.co 
This Tokyo creative firm takes transitions to 


another level. Make sure you see these. 


O03. La Shop Studios 


lashopstudios.com 
Discover this site's gorgeous waveform 


effects as the user interacts with the title. 


04. Maria Callas 


maria-callas.com/en 
Official site for the legendary singer. 3D 


forms mesmerise and engage the viewer. 


Graphics Colour picker Typesetter WordPress 


Yeaaah! Studio - Fall 2017 Décoin TT Tunnels Gastro 

bit.ly/2Aree3X bit.ly/2zavHQb bit.ly/2Am1E67 gastrobar.edge-themes.com 

Yeaaah! Studio is a French design studio and A modular font family with narrow A multi-talented WordPress theme with a 
independent apparel brand, which produces er ee proportions and a large number of focus on food and making that food look 


#E36A03 


beautiful illustrations. pronounced visual compensators. good with great photography. 
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CONTACT US AT: steve.jenkins@futurenet.com | @WebDesignerMag 


webkit 


Discover the must-try resources that 
Will make your site a better place 


= | Documentation GitHub 


PARCEL 


Blazing fast, zero configuration web application bundler 


Parcel 


parceljs.org 

So what is Parcel? In a nutshell, itis a 
blazingly fast, zero-configuration web 
application bundler. So, what does it 


Chhota! 


A Peed peed or! eecperar aa Fee arry Let alee 


Prettier | 
rw 7 ae 1 Ta 


deeplearn,js 


machine 
Gheary for the eeb 


have to offer? There are automatic deeplearn.js Chhota Prettier 

transforms using Babel, PostCSS, and deeplearnjs.org chhota.ga prettier.io 

PostHTML when needed and it has out- This is an open-source library that brings | Chhotaisa simple tool. It is a frontend Prettier describes itself as an 

of-the-box support for JS, CSS, HTML, file machine-learning building blocks to the url shortener without the need for a ‘opinionated code formatter’. It removes 
assets, and more - no plugins needed. web. It offers two APIs, enabling users to database. All you need is a single line all the original styling and ensures that 
And, it has very fast bundle times. train neural networks in a browser. of code to add to a page. outputted code is in a consistent style. 


TOP 5 Web conferences - Feb 2018 


Get yourself a seat at the biggest and best conferences coming your way soon 


‘- = 
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DEVELOPER,” 


DEVELOPER, 


er 
Perks Larges! Devdioger bapd + Cosfeernce Seract 


' DEVELOPER.) 2018 


TERPURY 2-7. DOIG | SF BAY 


- 
Vue js ng-europe RollingScopes | Awwwards Developer 
Amsterdam ngeurope.org Conference Berlin Week 
vuejs.amsterdam The Original European Angular 2018.conf.rollingscopes.com | bit.ly/2B9Z2te developerweek.com/ 
An event that enables you to Conference is back. Again it Are you a frontend person? The well-known portfolio site A weeks of events directed at 
discover, engage and learn brings you awesome people Then check out this for all the brings great speakers, a great developers. Includes a JavaScript 
with the Vuejs community. in the community. latest hot topics. venue and a great party. conference, AR/VR and more. 
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Voice search: 


Adapt to succeed 


There is a power shift in search. Find out how to take advantage 


hanks to the rise of mobile and digital assistants - such as Apple's Siri, Microsoft 
Cortana, Amazon's Alexa, and Google - voice-activated searches and commands 
have become more mainstream. And since more people are using voice search, 
it’s directly affecting how they search, and how businesses need to adapt their 
websites and digital marketing to stay on top of these ranking opportunities. 

According to comScore, 5O per cent of all searches will be voice searches by 2020 - 
a major reason for this growth is convenience and ease of use. But there is far more to 
voice search than convenience and the ability to multi-task, it's changing the way search 
engines handle search queries and how users search for the information they need. 

Voice search is uniquely tied to real-time, in particular local searches, with longer tail 
natural language searches typically reflecting immediate needs with stronger intent. 
This is an exciting opportunity for businesses and marketers to increase conversion and 
stay on top of this evolving niche. So how can you stay on top of the rankings? 

If you want your website to be found, it needs to be mobile friendly. Your focus 
should therefore be on creating mobile-friendly pages, with content that loads quickly. 
Use the free Google Test My Site tool (bit.ly/2aAXZOV) to see how easily a visitor can 
use your website on a mobile device. People also read mobile content differently than 
they do with desktop content, bear this in mind when creating your content and design. 

Amend your keyword targeting, in favour of longer tail Keywords and be conscious 
of ‘the why’ behind what users are searching for. This is because people talk differently 
than they type, consider how you would speak naturally and search for things verbally 
via voice search. Inevitably these will be longer keyword phrases, for example ‘What is 
the best Italian restaurant near Bournemouth station?’ 

In line with longer tail Keyword targeting, add an FAQ resource to your site. This will 
include dedicated landing pages, filled with content that list the questions and answers 
your audience has - who, what, when, where and why queries - as well as being 
optimised with keywords and metadata for search engine optimisation. Ultimately, you 
need to provide value to your users as well as the search engines. 


Paul Betteridge Make the most of advanced SEO techniques, such as Schema data markup, since this 
Digital Marekt Director will enable you to comprehensively describe what the data on your site means. Add this 
hampshireseo.co.uk to your HTML and improve the way your pages are represented in SERPs. This will 


ultimately boost your visibility since the search engines will find it easier to understand 


a een ee ae] who you are and what you do. For example: Structured data can be used to mark up all 
kinds of items from products to events to recipes. The following URL will helo you 
understand the basics and how to implement it across your website: developers. 


google.com/search/docs/guides/intro-structured-data. 


&6 ‘There IS far INOTe Most people use voice search to get information about physical places they want to 
tO VOICe search than visit, voice search can recognise ‘near me’ searches and turn to the Google My Business 


listings to populate these results. Utilising local listings can therefore increase your 


mere convenience and chances of appearing. Make sure your Google My Business account is up to date and 
= fe i : select all the relevant categories. Take advantage of other local listing directories, in 
the ability to multi task, It particular the free ones, to increase your search engine real estate and opportunity. 
1S chan eine the Way Start by visiting google.co.uk/int//en/business/ 
Also take advantage of localised paid placements, such as Google’s Ad Words. For 


search Chgines handle example, location extensions will enable your business address, phone number, and 
search queries 99 directions to be displayed alongside your adverts. This is crucially important if you want 


to show up in the strongly commercial ‘near me’ searches. Google Maps Local Search 
adverts will also help you reach the right people, at the right time. 
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| 
webkit Discover the must-try resources that 
Will make your site a better place 


<=? PURESCRIPT 


A strongly-typed functional programming language that compiles to JavaScript 


BENEFITS HELLO, PURESCRIPT! 


« Compile to readable JavaScript and reuse existing JavaScript code easily 
« An extensive collection of libraries for development of web applications, 
web servers, apps and more 
Excellent tooling and editor support with instant rebuilds 
An active community with many learning resources 
Build real-world applications using functional techniques and expressive 
types, such as: 
: Algebraic data types and pattern matching 
Row polymorphism and extensible records 
» Higher kinded types 
» Type classes with functional dependencies 
: Higher-rank polymorphism 


import Prelude 
import Control.Monad.Eff.Console (log) 


greet :: String -—> String 


greet name = “Hello, " <> name <> "|" 


main = log (greet “world™) 


QUICK START GUIDE TRY PURESCRIPT 


PureScript a 


purescript.org 

PureScript’s tagline is “A strongly-typed 
functional programming language that 
compiles to JavaScript”. It offers an 


extensive collection of libraries, idealfor | WVuetron Muuri Reshader 

development of web applications. For vuetron.io haltu.github.io/muuri reshader.com 

those who want to learn it has plenty of Are you using Vue or Vuex? If you are Looking for responsive, sortable, Reshader describes itself as “A micro, 
documentation and tutorials. Want to then you need to be take a look at this filterable and draggable grid layouts? highly-customisable JavaScript library to 
take PureScript for a test run? Head to tool, which is ideal for testing and Then check this library out. It offers get the shades of colours”. Detailed 
try.purescript.org/ debugging your applications. more than you think. instructions are found on the website. 


TOP 5 WordPress themes for January 2018 


Need to get yourself a good-looking site fast. Check out these smart themes 


is) 
Crofted far 


For You it 
Girlfriend 
Perfection 


Craftly Norebro Kazla Hares 


bit.ly/2jcgpBy norebro.colabr.io bit.ly/2B7IbvF bit.ly/2ASn4lj 

A big image slider takes centre This is a theme for creative Big, bright, bold and in-your-face | Rough and rebellious, this 
stage, followed by a personal professionals, and offers ahost | colours make this theme hard to | collection of home pages offers 
intro. A shop section means of smart and stylish page miss. It’s all about the visual with | big background images with 
users can display their wares. designs and design options. | content at a minimum. stylish graphical overlays. 
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Griddr 

bit.ly/2Cyi240 

If you like neat lines and layouts 
this grid layout template is just 
for you. Perfect for keeping text 
and images apart. 


The JavaScript | ae 
Handbook | a pesigner reader 0" 
} 
After completing the survey, 1 on ois wre" 


La 


you'll receive a digital copy of 
The JavaScript Handbook 

as a thank you for heat 
your feedback. 
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Each and every issue, we do our best to create a 
magazine that you love to read, and were always 
looking for ways to make it even eu ee 
again, wed like your help in z 
improving Web Designer 
magazine, and all you 

need to do is answer some 
very quick questions 
about yourself - we're 
really looking forward to 
hearing from you. 
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Subscribe and save 20% 


Every issue, delivered straight to your door 


Never miss an issue Delivered to your home Get the biggest savings 
13 issues a year, and you'll be Free delivery of every issue, Get your favourite magazine for 
sure to get every single one direct to your doorstep less by ordering direct 


What our readers are saying about us... 


“I’ve been a reader of Web Designer “Love the latest magazine that 
Magazine since the early days.” | purchased today” 
@sixrevisions via Twitter @navigation_web via Twitter 


“My favourite magazine!!!’ 


@eduardomutrillo via Twitter 


designer | Subscription offer 
Pick the subscription that’s right for you 


Subscribe and save 20% =§_One year subscription 
VY Automatic renewal — never miss an issue i V Great offers, available world-wide 
V Pay by Direct Debit : VY One payment, by card or cheque 
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A new year brings with it renewed 
enthusiasm, new technologies and a 
willingness to learn. 

The world of web designers and 
developers is never dull. There is always 
something new to learn. You know that 
something exciting is just around the 
corner. You know you will be making new 
discoveries that will excite and re- 
energise your very soul. 

This issue Web Designer decided to goa 
little left-field and do something a bit 
different to helo you become a better 
designer and developer in 2018. 

We wanted to include the practical, we 
wanted to include the helpful and we 


“The world of web designers and 
developers is never dull. There is 


d 


x 


wanted to provide quick snippets of 
intrigue, interest and essential resources. 
So, what's on offer in this 47-page 
special? We're not sure where to start, but 
we will go with creative heavyweight 
Tobias van Schneider. He reveals his five 
tips to help you become design royalty 
(p32). Looking for visual stimulation, then 
feast your eyes on some beautiful data 
visualisation projects (p26). Hoping to get 
more creative with your coding skills, 
then we're here to help (p46). Want to 
prototype with Origami, we show you 
how (p60). Need some gorgeous free 
font combos? (p38). We have this and a 
whole lot more. Enjoy. 


always something new to learn. 


You know that something exciting 


is just around the corner” 
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NEW WAYS OF 


WORKING 


Workspaces bring community and creativity. 
Web Designer visits THIS Workspace to find out more 


Freelancers and businesses don't want to stagnate, they want to create and produce. Workspaces 
such as THIS Workspace provide the perfect environment for this to happen. In need of inspiration? 
In need of advice? In need of interaction to stimulate your creative juices? Then head to your 
nearest workspace and sign up to discover the benefits today. 


= 4 a 


JOSHUA WINTERTON 
) — Partner at THIS Workspace 


www.thiswork.space 


am a | | ‘ best community of entrepreneurs, freelancers 
= = a \ f | i and established businesses, ranging 
f 4 from software developers, graphic designers, 
charities, branding agencies to journalists, 
photographers and tech companies. We design 
. workspaces from the ground up, seeking out 
a iconic buildings in central locations, and give 
ee et them purpose. We have an exciting expansion 
S ——E - plan ahead and we /ook forward to attracting 
> <i the very best of the UK to our workspaces 
> around the country! 
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NEW WAYS OF WORKING 


CHESTER RIGHTON 
: : . fF i Opportunity Maker for 

ed EE | | i; || | | THIS Workspace 

eels | _ www.thiswork.space 

= THIS Workspace is Bournemouth’s 

biggest creative co-working space 

located in the historic Old Print 

Rooms in the Echo Building. Home to 
an ever-growing community of 


— entrepreneurs and businesses 


authors, charities and more. If you're 
interested in a beautifully designed 
workspace to rent by the desk or 
studio, please enquire today. 
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EMILY MELLING 
Digital Marketing 
Manager at 

Yes I’m A Designer 
yesimadesigner.com 
Apart from the fact it’s 
an absolutely beautiful 
and inspirational space 
to rent a desk in, our 
team enjoy working 
around other 
professionals and 
developing new 
connections within the 
local creative 
community. We were 
very excited by the idea 
of being able to network 
on a daily basis. 


NEW WAYS OF WORKING. 
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JASON MACKENZIE 
Head of Bottle Bournemouth & 
president of the Chartered Institute 
of Public Relations 
www.wearebottle.com 

When Bottle was thinking about 
opening a Bournemouth office, we 
knew we needed a creative space - but 
THIS Workspace has exceeded our 
expectations. In the heart of the town, 
steeped in the heritage of storytelling, 
there was no better place for us to take 
root than in the Echo Building. The 
superb customer service and stylish 
ambience is an added bonus. Highly 
recommended (but don’t tell everyone, 
it’s our secret). 
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») SOPHIE SELCOE 
‘ Freelance Graphic Designer & Illustrator 
) sophieselcoe.com 
| was delighted to have won a month’s 
membership at THIS Workspace for having 
© one of the best portfolios at an incredibly 
inspiring Portfolio Review event they 
= hosted through Behance. My experience 
=a since at THIS Workspace has been one 
that has opened so many doors, through 
contacts I’ve made and advice shared by 
such an inspiring, creative group of 
y 9 Se people. /’ve since taken the leap to work 
f A 7 asa eS ene designer a0e | hope to 
9 | fF continue my membership. 
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KASIA NOWAK 

Owner of Peppermint 

Love Photography 
eppermintlovephotography.com 

| was looking for an office space that 

would be spacious, with great 

community and inspire me to be 

creative. THIS Workspace certainly 

ticks all the boxes and more! | love 

seeing how my work and productivity 

have improved by being around 

like-minded people and in the space 

that is so beautifully designed. | work 

here everyday and feel proud to 

invite my clients for meetings too. 

No more working from home and 

procrastinating! 
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GOODBYE 10 
UX DESIGNERS | 


As the web evolves so do job roles. Current roles will disappear and new appear. 


Here are five jobs that look set to be part of the design future 


_FULL-STACK DESIGNER 


disciplines. The emergence of this role is already 
motivated by employers needing to become more 
efficient with their budgets - whether it’s to be 
‘price competitive’, or public sector organisations 
responding to the government’s austerity cuts. 
Full-stack developers will offer better value to 


#* 
(om 


Similar to full-stack web developers 
who code for both front- and back-end 
technologies, full-stack designers will 


have skills in multiple design 


: employers by allowing for smaller team 


: requirements and less downtime due to more 
: flexibility to deploy skills. 


2 


INSTRUCTIONAL DESIGNER 


a 
(i 


A combination of graphic and UX 


design, but with a primary focus on 
delivering content for learning. This 

; type of design is applied to all forms of 
digital media from web pages to ebooks and apps. 
The obvious role for instructional designers is in 


supporting education organisations such as 


‘ universities for creating custom content for their 


5 courses. Additional demand for instructional 


: design is likely to emerge as more businesses 


' embrace technology such as self service 


supermarket checkouts - hence needing content to 


: instruct their customers. 
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SCIENTIFIC DESIGNER 


®& 


They say knowledge is power - whether 
that’s for PR communications, making 
business decisions or helping people to 
live a healthy lifestyle. The rise of 
digital technology and the Internet has allowed 


more data than ever before to be captured. 


24 


The problem with data is that it’s just data. While 
some have no problem making ‘sense’ of data 

: through statistical analysis techniques, the average 
. person Can only see ‘nonsense. This is where the 
role of scientific designer emerges - to present 
knowledge from data as Saat -to-understand visuals. 
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INTELLIGENT 
CONTENT AUTHOR 


The opposite of a 
scientific designer, 
an intelligent 
content author will 
produce content that either 
captures or reacts to data. This 
type of designer will evolve 
from UX design to embrace Al 
to allow content to adapt itself 
to what it knows about users. 
Data will come from multiple 
sources, including popular 
digital assistant technologies 
such as Alexa, Siri and Google 
Assistant. Design content will 
be hosted as either 
independent content or as part 
of an external platform such as 


. with chatbots for Facebook’s 


Messengel service. 


AR/VR DESIGNER 
, Lhe-emergence.of_— 
OS smartphones and 
fT the revival of AR/VR | 
es headset technology 
(see Microsoft Hololens and 
Oculus Rift) at an affordable 
price means that the 
mainstream public now have 
access to content using these 
abilities. Programmes for 
marketing, education and other 
activities have an opportunity 
to benefit from this medium 
through providing memorable 
experiences that engage their 
audiences. A medium is only 
useful if content is available to 


grow its potential - hence the 
role of AR/VR design asa 


3 specific design specialism. 
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NEXUS INTERACTIVE ARTS 
WEBAR EXPERIMENTS 


www.nexusinteractivearts.com/webar 
https://nexusinteractivearts.com/webar/weathAR/media/marker/marker jog 


‘ 


Our interest in web-based AR is driven by our desire 
to create AR experiences that are a hyperlink away: 
no download, completely integrated into a browser. 
Our studio is exploring how emerging technologies 
Can shape the future of storytelling. [he camera has 
become one of the most important features of our 

toolkit; a qoorway to contextual information about 

where | am and what | can see at that moment. 99 


LUKE RITCHIE 


HEAD OF INTERACTIVE ARTS 
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“Who wants to read detailed data reports when you can look at 
beautiful designs. Visit Sach one to appreciate their power 


( s) Why Age? Should We End Aging Forever? 


© bit.ly/2gTPSIm 


@ Kurzgesagt - In a Nutshell 


3 | This is a video that 
uses datainan 
engaging storytelling 
format with gorgeous 
graphics. This is just 
one of many. 


Middle Age 


1] ol oO) 1:20/6:48 
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PART OF WEEK 


: Zee j a 5 6 7 a 3 
Boy imeractive ESE 
infographic which 
Be oye ee a | 
vs & a : routine of the average 
: American citizen. 
Above Below : 
The illustrations The illustrative : z = 
’ : CLIgIOUS and Spirit tua 
are colourful theme Carries : Socializing, Relaxing, and Leisure |) fT ii” 
and engaging. on throughout, : aaohonie tal ts 7-7 
adding visual : 
information with : PERCENTAGE OF PEOPLE DOING ACTIVITY 
: A 
charts and stats. : Te en an a ee eT 
Senior é' : SEX EMPLOYMENT STATUS 
roots : Female Employed Unemployed | Nop Looking 
2s 1 2 3 4 & & FF 8 8 FY 
Middle Age Personal Care a | 
; Caring for Household Members 
Other 
: P Professional and Personal Care 
; EARLIER Religious and Spiritual 
: IN THE 
: DAY Caring for Non-Household Members 
: Volunteering 
: Work and Work-Related 
; Traveling i iota 
: Sports, Exercise, and Recreation 
5 LATER IN : 
: THE DAY Telephone Calls 
= Eating and Drinking it | 
: Household Activities 
: Consumer Purchases 
: Education 
H Socializing, Relaxing, and Leisure E — iP 
: PERCENTAGE OF PEOPLE DOING ACTIVITY 
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* Personal Care 


Household Activities 
Religious and Spiritual 


Work and Work-#e lated 


—E" 


Equcation 

: |@ & 

: Top above 

The order of the You can choose 
; daily activities by employment 
: changes with status, sex and 
the options you part of the week 
: choose. for different 
stats sets. 
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<>) Global Warning 
1 & — 
‘# networkosaka.com/Global-Warning 
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Derek Kim 


This Al, free-to- 
download poster 
is acollection of 
graphs imparting 
vast amounts 

of information. 
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Above Right 

The stats are The title is split 

placed in easy- across the 

to-digest charts. height of the 
poster and 
drops the 


opacity to make 
the info visible. 
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©) Allthe Government Barbecues 


‘# bit.ly/2znH7wU 
b Rodrigo Menegat 


=|: This infographic 
represents what 
government 
expenses are being 
spent on. In this case 
“churrascarias”. 


RS 6.122 


R$ 2.000.000 


Lontidentia 


RS 6.168 


ai Te 


RS 220 million 


Public 


Purchases 


RS 220 mi 


Left 

How much is 
being spent 
on what. This 
graphic shows 
that a lot of 
expenses are 
confidential. 
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R$ 15.088 


RS 10.595 


R$ 8,000 


Withdraws 


+ Rs6omi = RS 280 mi 


Above 

Simple circles 
in an equation 
show the 
difference 
between the 
two amounts. 
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«2 Data Visualisation Weather Eindhoven 
. . 
mf bit.ly/2yDoqvVz " . : 
* * . # 
-& studioterp.nl : ez ee Tt lel TTT he 
o * ‘| * ; veal ". f e 
‘> A visualisation of the : . : e \e * s te FF oF Lye of? fF, 
~ weather in the Dutch ear\ 8 5 Ri \ii7 | #/ 
town of Eindhoven Cin abs, WMS * * oo 
across the months of iin . 
the year. Also see the : i . es ie 
studio’s other work. r as = ant 
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. “« 
- * «& 
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Precipitation be _ : 
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elf o * “ 
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Left Right 
A close-up view Windforce, . Ww | 
of Eindhoven’s precipitation, Weather Eindhoven 2014 


weather month temperature 

by month. and thunder- 
storm data are 
all included. 
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Poole, United Kingdom Paris, France (CET) 


a | 


| 67 29 15 29 
Mon. lath Bon, hth 
Paris, France (CET) Japan (JST) 
Above Middle 
7 The app is Automatically 
cemiperature ja ¢ populated by added data can 
location. Type in be edited or 
the initial letters deleted to 
and choose a create whole 
location to add new patterns. 


a new segment. 
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OF \ 
ow to become 


DESIGN 
ROYALTY 


Creative heavyweight Tobias van Schneider reveals five 


essential tips to take your designs to the next level 


1 FORGET THE IDEA OF 

» OVERNIGHT SUCCESS 

We love to celebrate success stories and put 
people we admire on a pedestal. But we 
forget even the most successful people had 
to start somewhere and worked hard to get 
where they are today. There is no such thing 
as an overnight success. 


TOBIAS VAN 


SCHNEIDER 


Co-founder of Semplice 


www.vanschneider.com 


9 REMEMBER A SIDE PROJECT www.semplice.com 


» CAN CHANGE YOUR LIFE 


Look at every task or project that comes 
your way, even the seemingly small and 
insignificant ones, as an opportunity. You 
never know where an article you write, a 
video you make or a design you create 
might take you. Say yes until you can afford 
to say no. 


@vanschneider 


BE STUPID 


= The greatest ideas never make it into 
the world because we're too afraid of what 
other people think. We fear failure and 
come up with excuses. We overcomplicate 
and our idea dies before we've even begun. 
Keep it simple, be stupid. 


TRUST YOUR GUT 


a With all the information in the world at 
our fingertips, we can easily talk ourselves 
in circles. Information often fails us, but 
intuition almost never does. Your intuition 
is the sum of your experiences, learnings 
and a little magic. Do what feels right. 


DON’T DO IT FOR MONEY 


=» Of course we need money to live, but 
it shouldn't be our main motivator. Aim to 
make what you need to get by. This will 
open up opportunities and relationships 
you wouldn't otherwise consider, and work 
that actually excites you. Money usually 
ruins the fun, but fun brings the money. 


© Michael George 
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AUGMENTED REALITY 
POSTER FOR AMERICAN 
FILM FESTIVAL 


https://xr.plus/jt8 
https://xr.plus/jt8 


C C People love Augmented Reality, but don't like to 
, install mobile apps. So we made a web platform to 
Share AR content directly on browsers using 
JavaScript technology. You can think of it as the 
‘Vimeo for Augmented Reality’ >b 


XR+t 


WEBSITE 
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FACEBOOK POWER TIPS 
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EVERYONE 


15 POWER TIPS FOR TWITTER, FACEBOOK, AND INSTAGRAM 


GET LOCAL 


If you are only going to do 
One thing with social media 
from now on then it should 


be this. Join as many local 
community groups as 


possible and post regularly 


in them. Get known, 
provide advice, answer 


questions. Just participate. 


People buy from people 
they know. So make sure 
everyone knows you. 


MEMES 


People love to share 
funny pictures. The 
picture itself isn’t going 
to get you any business, 
but becoming known as 
a person who is funny 
isn’t going to do you any 
harm at all. Social media 
is about interaction. Be 
the person that everyone 
likes. Try to make what 
you share relevant... 
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KNOW YOUR 
AUDIENCE 


Every single Facebook tip 


boils down to one thing. Get 
to know the people around 
you, and make sure they know 
you. Talk to people, answer 
their questions for free, be the 
guy everyone likes, the first 


person they think of. Then 


when they need something, 


you'll have already sold it. 


INTEGRATE EMAIL 


MARKETING 


Do you have a regular 


newsletter? If not then shame 


on you, go start one now. 


Then integrate the sign up 


with your Facebook page. 


There’s no point in going to all 
of the effort of making people 
like you if you don't leverage 


it to get an opportunity to 
pitch your business. 


| 


RECOMMENDED APP 
TABSITE 


www.tabsite.com 

Enables you to create tabs in Facebook, so 
you can run competitions, sweepstakes, 
and special offers. 


RETARGETING 


We know it kinda goes 
against the ethos of this 
list to suggest you simply 
pay for adverts, but 
Facebook’s retargeting 
system rocks. And even 
better it doesn't have to 
cost much. The more 
people see you the more 
likely they are to buy, so 
retarget to make sure they 
see you again! 


LOOK AT ME 


TWITTER POWER TIPS 


QUANTITY 


The average lifespan of a 
single tweet is measured in 
minutes. Even assuming you 
have a good audience then 
tweeting once a day is only 
ever going to reach a tiny 
fraction of them. You should 
be aiming to post multiple 
times a day. Retweet yourself 
if you have to. 
CONVERSATION 
It seems a little odd to 
think of Twitter as a place 
for conversations when 
you remember the 
character limit, but it 
really is. Answer people, 
compliment them, thank 
them for retweeting you. 
Show them the person 
behind the tweets, and 
you will reap the rewards. 


BECOME THE 
EXPERT 


If you aren't tweeting links 


to interesting articles about 


your industry then you are 
missing a trick. Portray 
yourself as being 
knowledgeable and at the 


cutting edge without having 


to write your own content. 


That a real win-win situation. 


MOVING 
PICTURES 


Everyone likes a good GIF 
right? Get yourself over 
to Giphy and start using 
them as answers. You'd 
be amazed at how many 
conversations are taking 
place on Twitter right 
now with nothing but 
GIFs. Come and join in. 


EVERYONE LOOK AT ME 


RECOMMENDED APP 
TWEETDECK 


tweetdeck.twitter.com 

Do you want to manage multiple Twitter 
streams at the same time? Then 
TweetDeck is the thing for you! 


RIDE THE COAT- 
TAILS OF FAME 


Tag people. The more 
followers the better. Make 
sure they are relevant to 
your business, and your 
tweet is relevant to them. 
All it takes is one retweet, 
or reply from a big name 
in your industry for 
people to notice you. 
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INSTAGRAM POWER TIPS 
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USE VIDEO TO 


know it is you” 


GET ON BRAND 


Creating a content strategy 
helps keep you on track 
when deciding what to 
post. Make a recognisable 
look for everything you do 
and soon people will start 
to know it is you before 
they even see your name. 
Help your potential 
customers see the world 
your way to make them 
feel connected. 


CONNECT 


Because Instagram is so 
focused on photo 
sharing, people often 
forget about video. Lots 
of people don't bother 
because of the length 
restrictions, but if you’re 
happy to record live then 
you can have video of up 
to an hour in length. 
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“Make a recognisable look 
for everything you do and 
soon people will start to 


#USE HASHTAGS 


Hashtags are massive on 
Instagram. Unlike on other 


social media sites where they 


have been shown to have a 
negative effect, hashtags 

genuinely help people find 
your content. Use trending 


hashtags to get visibility, and 


create your own brand 
hashtags for others to use. 
Just make sure that you 
monitor them! 


/ REMEMBER THE 


COMMUNITY 


Whatever your feelings about 


Instagram, it’s still social 


media. Which means it’s about 


interaction. Like your 


customers pics, especially if 


they have your products in 


them. Reply to comments on 
your images, and make sure to 
comment on other people's. 
Don't forget to tag people too! 
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RECOMMENDED APP 
HOOTSUITE 


hootsuite.com 


Many professional marketers would be lost 
without Hootsuite. It’s a one-stop-shop for 


everything social. 


As a general rule of 


thumb the sort of person 


who is active on 


Instagram is creative and 


likes taking pictures. 


Running a competition 
with a specific hashtag is 


a lovely way to drive 


awareness of your brand 
while letting people do 
What they already like to 


do anyway. 


COMPETITIONS 


cenera e (at) 


The conference for web designers 


NEW YORK | 20-2/ APRIL 2016 


foe 


all : aw © Ge and 
DONNALICHAW «WES BOS ABBY COVERT DAN MALL VAL HEAD more! 


www.generateconf.com | #generateconf 


Great typefaces 

come in pairs. Here 
wecouplethebest “== 
free fonts on the web | |- == 


AVENIR LT 65, WITH 


WIDESS PACING. 
PERFECTLY BALANCES 
THE BEAUTIFUL CHAOS 

OF ROWO., 


ROWO TYPEFACE REGULAR 


FONTS 


FALSE NINE 


FALSE NINE | 


http://bitly/2B9i5ax = ti (tsté‘é;O!!.C éCttp -//bit.ly/2uRtylv 


COVES 
Coves Is one of the most 
viewed fonts on 


Benance, and combines 
well with Lato. 


www.behance.net/gallery/32715299/ http://bit.ly/2bJvqFL 
Coves - Free Font 
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The almost typewriter feel 
of Averia Serif Light 
works nicely with Giza: 
who said serifs are boring? 


The curves of Santor 


make Quicksand an 
appropriate suitor. 


QUICKSAND 


http://bit.ly/2CW7ooF http://bit.ly/2IMpwbh 
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i 
KOLIKO REGULAR IS A 
GOOD FIT TO DISPLAY 


AGAINST THE BOLDER 
LEMON/MILK. 


LEMON/MILK KOLIKO 


Candara Regular, a standard font free 
on many computers, compliments 
Beauty Regular well, and gives a 
writerly finish. 


BEAUTY REGULAR CANDARA REGULAR 


http://bit.ly/2Zk9xL2 http://bit.ly/2B7n1MS 


MAKE A MILLION 


DISCOVER THE 4 BEST ONLINE SHOP SOLUTIONS 
TO HELP BUILD YOUR BUSINESS EMPIRE 


Ashopify osirami- rece mon eonoUmeTE 


The ecommerce platform made for you 


Free professional ecommerce themes 


Create a beautiful online store cus Zed to your brane 


Lea T th 


(in iM wits ee cod [errr | 


The most customizable eCommerce 


platform for building your online business. 


Get started today for free. 


Manin ta eee os pee mt brane ypmgrapiey ‘er creer JD pear 
mag eh onan beige dete p ches rhdeygy where panel aot 

SPUR PWS! beMbe te Tee Pere chee pau es ida pa ree oo? Leeps 
brad oper diag fe hes Capron amd beer heatea ees fs the naked toms 
che To Galen, oo Para blacked vie 1 Oper Garsee 


Rearheng ter qf penile: pobadly aos trie past cherwe at one bears at 


cnTaypeory cane 


AaBbCcDdEe 
AaBbCcDdEe 
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df commence ny TART ED 


Build your online store with BigCommerce 


Side? POU Pah Te 


iam 


ibe ine tal 


HIT 
REFRESH 


Your best day starts before you even wake up. 


F volugson 


iF volusion 


“ee 


Premium Thera Premiiurn There 


Premium Theme 


180 ‘680 2000 
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According to Wikipedia these are 
the most expensive domain 
recorded. However, other domains 
have cost more, but these typically 
include content as well as the 
domain. LasVegas.com is reported 
to have cost a whopping $90m, 
while Carlnsurance.com very 
nearly tops the $50m mark. 
Unbelievably Cars.com was valued 
at $872m. For a bit of fun why not 
find the (approx) value of a domain 
you own. Take atrip to 
www-.siteprice.org 
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is your domain worth? 


bieoenad 


at 


(2012 


PrivateJet.com 
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2 - PrivateJet.com) | 
= 
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| 360.com | 
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LALA LLL AL 
Baas 


ttp://bit.ly/2AQU4JN 


LEARN 
») -CALLIGRAPHY 


AUGMENTED 
REALITY 


Step 1 
GET HIRO MARKER 


LEARN CALLIGRAPHY TODAY 


https://learncalligraphy.today 
https://learncalligraphy.today/hiro-marker.htm| 


The best digital products are found 
on the intersections of different 
fields. AS a designer | like beautiful 
Calligraphy, and when | found 
AR Js library | decided to build a 
oroduct with a mix of augmentecd 
reality and calligraphy. 93 


‘ 


VOLODYMYR KURBATOV 


FREELANCE VR/AR PRODUCT DESIGNER 
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REA 


LET YOUR IMAGINATION 
RUN FREE BY PLAYING 
AROUND IN CODE. SEE HOW 
LIBRARIES, BROWSERS AND 
APIS CAN COME TOGETHER 
TO CREATE MESMERISING 
VISUAL DISPLAYS 
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GET IN TC 


t is difficult to define exactly 
what ‘creative coding’ means. In 
broad terms, it refers to the 
production of something that is 
expressive in nature rather than 
having a purely practical use. It is a 
chance to learn and explore how 
various different technologies can 
come together to create impressive 
works of art. 

What form that takes is entirely up 
to the creator. Anything from data 
visualisation to image manipulation 
could be considered ‘creative 
coding’. The web is flexible enough 
to open up opportunities in different 
areas of art and design. 

Here we look at the different ways 
you Can experiment with code and 
create stimulating visual results. 


sketch.js > particles 


Create a multi-touch particle toy 


+ START DRAWING! 


TOP 4 LIBRARIES 


SKIP THE SETUP AND START GETTING INVENTIVE 


pd.js 

p5js.org 

Processing is the holy grail for creative 
coders. It provides a language and an 
IDE to enable designers and non- 
technical people to create stunning 
visualisations without getting buried in 
the technicalities. 

The p5jjs library takes the principles 
of processing and applies them to the 
web. It delivers the same kinds of 
abstractions, which provide simplicity 
to the beginners and offer powerful 
control to experts. 

The bulk of the work happens 
within two functions - one controls the 
project setup, while the other draws to 
the page in a loop for the life of that 
project. The library supplies plenty of 
global methods and variables to 
update the page within these 
functions. For example, calling 
frameRate(6O) lets p5.js do the hard 
work of maintaining a constant 6Ofps. 


sketch.js 
soulwire.github.io/sketch.js 
Weighing in at under 5kb, sketchjs is a 
tiny framework that helos developers 
get up and running with creative 
JavaScript. It’s light enough to embed 
in any website, but provides plenty of 
features along with it. 

It's possible to hook into methods 
that react to events within the 
projects. While this includes the usual 
callbacks, such as the animation loop, 
Sketchjs also opens Up events such as 
keyboard input and window resizing. 

Touch and mouse inputs are 
treated the same, which makes all 
projects touch-friendly by default. 
While it is possible to target either 
input type specifically, it takes the 
worry out of dealing with the small 
differences between the two event 
types. It can also calculate the deltas 
between these points automatically to 
make physics calculations easier. 


D3 


d3js.or 
While D3 has long been the go-to 


library for creating graphs and charts, 
that isn't all it's capable of. Its 
data-driven approach makes it great 
for creating attractive visualisations - 
either informative or abstract. When 
combined with a rich data source 
such as the Twitter API, it makes 
infographics easy to create. 

By manipulating DOM elements, 
such as SVG, D3 will work with any 


assets already a part of an application. 


It provides a structure around which 
they can be transformed to provide 
emphasis or to animate onscreen. 

There are plenty of ways to access 
D3 through other libraries and 
frameworks as well. Specially created 
components for React, directives for 
Angular, and plugins for most other 
front-end frameworks are readily 
available, for example. 
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three.js 

threejs.org 

Working in 3D with WebGL can be 
complicated at the best of times. 
Working out how shaders and camera 
perspectives work in such a wide- 
reaching API can take away from the 
creative aspects of a project and slow 
everything down. 

With three js it’s possible to skim 
over these tricky aspects and focus on 
the visuals. It is a 3D JavaScript library, 
which works with WebGL to easily 
create beautifully smooth interactions 
with minimum effort. 

The library provides many built-in 
methods for creating objects in the 
scene. Everything can be altered just 
like any other JavaScript object and 
will uodate accordingly. Complicated 
techniques, such as texture mapping, 
are provided out of the box and are 
usually just a case of setting the 
appropriate option on the object. 


4/7 


GET SMART WITH DATA SOURCES AND APIs 


GET NEW DATA FROM ELSEWHERE AND KEEP YOUR PROJECT FRESH 


Twitter 


With over 320 million active users in 
2017, Twitter is a wealth of information. 
People are talking about every 
conceivable topic by posting pictures 
and video alongside their unfiltered 
reactions in real time. 

This makes it a goldmine for a 
creative coding project. The official API 
can bring back the tweets in the 
format needed along with other 
metadata that is open for analysis. This 
data can then be visualised in new 
and exciting ways. 

The Twitter API provides four 
defined ‘objects that can be retrieved 
- tweets, users, locations and entities. 
Entities include extra information 
linked to those objects including 
hashtags and media. Values on these 
objects are fixed and will only ever be 
extended upon, which means you will 
never lose access. 

Tweets themselves can be searched 
for with a query to a single endpoint. 
These searches can either be for a 
String or can be more descriptive, 
such as for images or tweets with a 
positive sentiment. 

Visualising Twitter data can make a 
great connected design piece. 
Combining multiple data points such 
as location and sentiment can create a 
project that is also informative, such as 


graphing live tweets about a topic 
from around the world. 

While there are plenty of 
opportunities to use the output from 
Twitter, the API also allows for 
applications to post messages to 
Twitter. These can come from any 
source provided that it’s connected 
to the API. 

All endpoints in the API require 
some kind of authentication. For most 


The Twitter API 
provides four 
defined ‘objects’ 
that can be 
retrieved 


projects that is only an application key, 
but authenticating can be tricky when 
done manually. Thankfully there are a 

few packages that make working with 

the Twitter API a little easier. 

The nom module ‘twitter is the 
catch-all client library when working 
through Node. It supports regular 
endpoints as well as streaming, which 
may be useful for real-time projects. 
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Instagram and Flickr 
Creative coding projects are often 
visual, which makes image and video 
Sharing APIs an attractive prospect for 
inspiration. Thankfully, sites such as 
Instagram and Flickr open up their 
data and allow developers access to 
that content, as well as the 
Surrounding metadata. 

Instagram has become one of the 
web's most popular image-sharing 
platforms. As a result, it is a rich source 
of images to use in creative projects. 

The API is no different. It provides 
access to images, videos, comments 
and tags, as well as ways of searching 
through this information to find what is 
needed for the project. 

Access within the API will be initially 
limited to a small pool of accounts and 
images. To remove some of these 
restrictions, Instagram will need to 
review the project themselves, which 
can be time-consuming and fruitless 
for creative coding projects. 
Depending on the project, the initial 
Sandbox mode may suffice. 

Flickr has a more readily accessible 
API. It is a resource of high quality 
images available at multiple 
resolutions. Many of the photo 
endpoints only require an application 
key to work, which makes set up and 
fetching much easier. 


The ‘flickr.ohotos.search’ endpoint is 
the most commonly used and gives 
access to most of Flickr’s content. It 
can be filtered and sorted by date, 
location and even license as 
necessary. Other endpoints can get 
more detail on the photo, such as 
comments or EXIF data 

Getting the API to work exactly how 
the project needs it to can be difficult, 
particularly if writing information back 


Flickr has a 
readily accessible 
API. Itisa 
resource of high 
quality images 


to Flickr. Luckily, plenty of packages 
exist to help use it with JavaScript, 
including the company’s own 
‘flickr-sdk’ on nom. 

It’s important to note that all images 
remain the property of their owners. 
For personal projects this will not be 
an issue, but if it’s being shared be 
Sure to either seek permission or 
credit the owner. 


Social media APIS such 
as Twitter, Instagram | 
and Last.fm can 


provide a great Source 
for data visualisations 
and mashups 


Camera and Microphone 
The web is usually limited to pointing 
and clicking with a mouse, but that is 
not the only way of providing input. 
Today's browsers are equipped with 
new APIs to pull in data from different 
external sources, including cameras 
and microphones. 

Making projects that are visually 
aware Is a great way to get users 
involved. By using vision as an input 
over a traditional keyboard and 
mouse, users are able to interact in 
different ways, such as face tracking or 
image recognition. As most devices 
now come with a camera built in, it is 
no longer the barrier it once was and 
works out great for the web. 

Listening to the user is alSo a great 
alternative to manual input. Voice 
recognition could control navigation, 
or users could provide their own audio 


Samples to use within their experience. 


It could alSo serve as an alternative to 
a button press. By extracting pitch and 
volume, these can then be mapped to 
what normally would be a button 
press, which could be used to control 
anything from colour to movement. 

Access to a camera and 
microphone is possible through the 
navigator object. 

navigator.mediaDevices. 

getUserMedia({ 

audio: true, 

video: { width: 640, height: 480 


J) 
.then(function(stream) { 
// Access input 


}) 
.catch(function(error) { 
// Provide fallback option 


be 
The code has to specify exactly what 
is needed from the input devices. The 
call to getUserMediaQ will trigger a 
permissions dialog that the user must 


By using vision as 
an input over a 
traditional 
keyboard and 
mouse, users are 
able to interact in 
different ways 


accept before continuing. Once 
accepted, these features are available 
as streams, making them more 
memory efficient. 


All major browsers support this API, 


including mobile. lf the browser 
cannot meet the exact requirements, 
the promise will reject and not work. 
It’s important to supply an alternative 
experience, such as an image upload 
form, where access is not possible. 
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MOBILE DEVICE SENSORS 


WORK WITH THEIR UNIQUE INPUTS 


The world of mobile presents a 
completely different set of 
opportunities when it comes to 
creative coding. The wide variety of 
form factors and sensors open for 
use within the browser can make 
for some distinctive experiences. 

Mobile devices are almost 
exclusively touch interfaces. 
Browsers have the ability to detect 
and track multiple touches at once. 
This means that projects do not 
have to be led by a single point and 
can be manipulated in a much more 
intuitive way. 

window. 
addEventListener(“touchstart”, e 
=> fi 
e.preventDefaultQ; 
const touches = e. 
changedTouches ; 
3); 
All touch events use a 
‘changedTouches’ property on the 
event. This holds a reference to all 
the touch points that changed 
dependent on the type of event, 
rather than a separate event for 
each touch point. By tracking these, 
it’s possible to map gestures or 
paint with touch. 

Accelerometers and gyroscopes 
are mostly used for changing from 
portrait to landscape mode, but 
these are also up for interpretation. 
Different methods of interaction 
can be created by using the device 
itself as a control mechanism 
- whether that in specific co- 
ordinate movements or more 
gesture-based, such as a shake. 

Bf window. addEventListener (“deviceo 


| rientation”, e => { 


console. log(e. gamma) ; 
4); 
window. addEventListener (“devicem 
otion”, e => { 
console. log(e. acceleration) ; 
B}); 

APIs provide access to this 
information, but the values 
returned will vary by browser as 
they do not all use the same 
coordinate system. Libraries such 
as p5.js provide special values and 
hooks like ‘rotationX’ or 
‘deviceShaken(Q’ to help abstract 
away the differences. 

Mobile devices also have the 
ability to determine their exact 
position using geolocation. Being 
able to get the exact location of a 
device can open up new 
possibilities and make for a more 
streamlined experience. 

navigator.geolocation. 

getCurrentPosition(pos => { 

console. log(pos.coords); }); 

Access is provided through the 
navigator object. The value 
returned is the lat-long co-ordinates 
of the device, along with other data 
such as altitude or speed if the 
device supports it. Browsers will 
use the fastest method of detecting 
location, such as the IP address. 
However, this may not always be 
the most accurate. 

Combining these inputs in 
creative ways is the key to making 
something special. For example, 
using the device's location and 
orientation to create a virtual 
stargazing experience. 


% 


“can move the scene around to explore in more detail. 


Se ee ae Tart! o | S's 2SESSee" =e ate 


12 WHITEHALL, LONDON, ENGLAND 


Brick Street View will show what your current surroundings 
would look like if they were made from LEGO 
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MULTI-SCREEN 


EXPERIENCES 


BREAK FREE FROM THE DESKTOP 


Desktop browsers provide reassuring 
familiarity when it comes to creative 
projects. But by experimenting with 
different displays, users can get a 
more personalised experience which 
works for them. 

The principles of responsive design 
still hold true for creative coding 
projects as well. Users should be able 
to enjoy them regardless of device, 
whether that’s desktop, mobile, or 
projected on a giant screen. 

These differences can also be used 
to enhance the project further. By 
using media queries in CSS, mobile 
users could get an experience tailored 
to the smaller, handheld form factor. 
Since mobile users tend to be just one 
person, these visitors could be offered 
a more personalised view of a bigger 
platform, for example. 

Paper Planes, by company Active 
Theory (paperplanes.world), 
encouraged users to create virtual 
planes on their phones. These could 
then be ‘thrown’ and show up on the 
desktop version of the site. There, 
visitors could watch as planes flew 


around the world and see where they 
had come from. 

Interactions such as these can be 
made easier with WebSockets. 
Communication between a browser 
and the server is event based, 
avoiding the need to poll the server, 
which can often be wasteful and 
prone to delays. Projects such as 
Socket.io can make setting up 
WebSocket protocols easier. 

Direct communication between 
devices can also have a powerful 
effect when users are together in the 
Same room. Seb Lee-Delisle’s 
PixelPhones project (seb.ly/?p=2415), 
for example, turned a crowd of 
screens into a makeshift display. Once 
all were connected, everybody 
became part of the experience. 

WebRITC is a set of JavaScript APIs 
that makes real-time communication 
between browsers easier. It needs a 
server to set up a connection, media is 
sent directly between browsers, which 
makes interactions quick and simple 
to create. Now supported by all major 
browsers both on desktop and mobile. 


WebRTC is a set of JavaScript APls 
that makes real-time communication 
between browsers much easier 


Bubbles - a project made for 
Google I/O 2017 - enabled 
users to pass bubbles 
between one another from 
across the world 
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OELF-GENERATIVE ART 


LET THE BROWSER GET ARTISTIC 


Even the most creative of coding 
projects can become stale after a 
While. An element of randomness can 
keep things fresh each time a piece of 
code runs. While that can come from 
user input, it can be interesting to see 
what code is capable off when it’s let 
off of the leash. 

Instead of defining what the output 
of a block of code would be, define a 
set of rules for it to follow. When a 
random starting position is defined, 
the end results will vary completely. 

Conway's Game of Life is a great 
place to start. In a defined grid, each 
square can either be ‘on’ or ‘off 
depending on the squares around tt. 
By colouring the squares dependant 
on their state, it generates an image. 


WEBVR AND 
BLUETOOTH 


Repeating the process multiple times 
shows how groups of squares mutate 
over time. Tweaking the rules on 
which they change can dramatically 
alter the outcome. 

Using JavaScript with a <canvas> 
element makes this visual process 
fairly simple. By using 
requestAnimationFrame0, JavaScript 
can re-evaluate its environment each 
frame. From there it is a case of using 
the output of the last frame as input 
for the next frame and let the program 
take care of itself. 


Infinitown, by Little Workshop, 
generates a procedural city that is 
unique each time you visit 


STEP OUT OF THE BROWSER 


While browsers are getting more 
Capable and powerful every day, there 
is only so much that one viewport can 
provide. Thankfully, browsers are also 
expanding out of the browser too. 
Virtual Reality (VR) has the ability to 
immerse the viewer in ways not 
possible before. WebVR is an open 
specification that allows access to 
these immersive worlds to the masses 
through the browser. It also helps 
bridge the gap between different 
device types, such as Google 
Cardboard and the HIC Vive. 
Frameworks, such as A-Frame, can 
helo bypass any complications by 
providing ready-to-go building blocks 
for VR experiences. Since these are 
built for performance and reliability, 


they leaves the creator free to make a 
great user experience. 

Bluetooth is another option and an 
opportunity to forego a screen 
entirely. Chips are readily available and 
can be combined with different output 
devices to emit sound and light - all 
controlled by the browser through the 
Web Bluetooth API. The interface is 
promise based, which makes 
asynchronous communication 
somewhat easier. 

Browser support varies as these 
technologies evolve. WebVR is 
currently supported in various states 
by development builds of Edge, 
Firefox and Chrome. Web Bluetooth 
only has support from Chrome right 
now, but others are considering it. 
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POWER UP YOUR 


PORTFOLIO 


CREATIVE DIRECTOR TOM WIT TEIN REVEALS 
6 ESSENTIAL RULES TO IMPROVE -=AND IMPRESS 
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SCREENSHOTS AREN’ = 
ALWAYS BEST | 


Obviously youlFbe chuffed to bits with 
your sparkling new-design so you'll want to 
drop-it-in.as many iPhone. and Mac 
templates-as you can, but that isn't always 
the-most attention-grabbing-approach. 

Try using client:photography as the ‘hero’ 


image on your landing page, then of course, 


use your screengrabs once youre into a 
particular case study. If the-client’s photos 


...aren‘t-all-that.(very.probablé); l66K 


at what you've put-on-their- homepage: 


Could you use their logo and their colours: to- 


send the message as opposed to tiny. 
images of screenshots? 


_TESTIMONIALS OR 
UOTES AS YOU CAN 
IRECTLY FROM THE 
PERSON YOU 
WORKED WITH ON 
THE PROJECT” 


Ss. 
ites fay 


POWER UP YOUR PORTFOLIO 


ATTENTION- 
GRABBING TITLES 


Instead of starting your case study off by 
saying. kook at the new redesign of XYZ. 
com, you can make this more engaging by 
Saying something along the lines of 
“Improved new customer interactions and 
conversions by. 24%" by picking out key 
Stats from Google Analytics. 

Ifthey don't have any specific statistic that 
you can flaunt or. they resomething like a 
barrister,-no bother, just instead talk about 
improving-the.user.experience.through a 
more simplistic navigation, more effective 
mobile website or even just bringing their 
site into.the 21st century. 


LET THE CLIENT 
SING YOUR PRAISES 


Get'as many testimonials or quotes as you can 
directly from the person-you worked with on 
the project: This helps enormously for people to 
understand-your capability to work with others, 
not just your design/coding skills. 

Given-how much of our work requires human 
interaction; itis vital for prospective clients to 
understand that you: know how:-to-manage 
yourself = and relationships. 

In addition, it’s useful to ask clients to"add 
their comments to your-LinkedIn. Quite often 
that may. be a client's.first interaction with you 
as opposed to coming.onto your website. The 
old adage of word of mouth being the.strongest 
form Of advertising is.stilalive and well: 
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TELL A STORY. | a 5 ss pene : 


ALL ABOUT THE DETAIL 


In- your. case studies, pick up on the small details 
you_agonised over and the reasons why. For 
example, talk.about the complexity of a JavaScript- 
driven menu that-allows-you to navigate to the 
lowest level in the site in just a couple of clicks to 
improve UX. As long as you-dont get too geeky, 
this-will illustrate how you approach-work - with 
clear attention_to detail: 

Ask how a fine furniture maker might talk about 
the beautiful mahogany cabinet he’s just made that 
=—=took him 3,000 hours to produce. He'd likely — 
mention joins, hinges, handles and polishing: When Zp 
you consider your work is akin to a traditional it =A y 
craftsman, you'can begin to see more than aia ee 
graphics and code. Se 


Se ll 


It's easy to just-explain wast your did- when falking. 


about a project, but it can be far more interesting ..- “—=— Tee ag een ae 
to explain why you did it. By weaving the redesign —— = ars site —o 


or project into a narrative you can begin to draw.in~ aise ae ae ee 
es te eae oT ra =e et i a 


the audience a little more than a sim@le deluge of eee == Far, eperrtne roe 
facts and figures. ~~~ es ae ee 
For example, as opposed to “we ea og and eee ea Se 
built the new eCommerce store for XYZ.com”, you ————————————————— 
could begin with explaining who they are, what their 
current scenario was and the solution you came to 
~help evolve them.out of their current predicament. —-— = — = or 
aS eae SS : = Serr ome — ae 
: %. . < a coe ———— — 
i tne ie a Rc rer ts a oe 
& DON’ T GET co KY, KID ee 
= ET rsa laaee 
= there’s nothing worse thana a Tas: = lam 
“designer's overly ‘designed’ website, whith az 
= they've thrown all the bells and whistles ‘at to. Sei ea 
~showcase their abilities; but neglectedto = 
= provide clear routes to see the work itself--——— 
=~ |'should-know, because as-a junior spent = “=== 
———-every waking hour redesigning my-own website... 
to chuck-in more wizardry that ld learnt; only to 
realise that.basically all anyone needs is a nice, =—— 
simple, clean looking page witha clear list of all 
_ the work completed, complete with the ability to 
jump into it, and an easy way of moving back.to 
‘the list, or jumping to the next item.;Oh - and 
make sure your images are big, bold-and- extra 
clear. On mobile and desktop! 
ik i 
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“ITS EASY TO EXPLAIN 
WHAT VOU DID 


ONLINE 

PORTFOLIO 
SITES FOR 
DESIGNERS 


Awwwards 


WWW.awwwards.com 


One of the more established design 
award sites with an enormous 
following. Get featured if you can! 


Instagram 


www.instagram.com 


Put your work where people are - 
use simple snapshots of your latest 
work with clear links to your site 
and good hashtags. 


CAN BE FAR 


Dribbble 
https://dribbble.com 


A kind of ‘Twitter for designers’ 
where you can post teaser shots of 
your latest work. 


Behance 
www.behance.net 

Perhaps the world’s most famous 
designer ‘resume and portfolio’ 
site. A great way to meet other 
designers, too. 


LinkedIn 


www.linkedin.com 

Tactically a strong move. Not as 
sexy as the others, but a great way 
to grab an individual's attention. 


BUTIT 
R MOR 


INTERESTING TO EXPLAIN 


WHY ¥OU DIDIT™ 


POWER UP 
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Node.JS is a godsend to JavaScript developers. 
The latest version of the “browser-breaking device” 
brings a neat set of new features. Let’s take a look... 


Google’s HTTP/2 protocol speeds up the delivery of 
web content by reducing redundancies in the server-client- 
communication process. 

While the new version of this technology has been 
supported in Node.JS for quite some time, using it required 
the use of an additional, pesky flag. Node.JS 9 does away 
with that - simply fire up the runtime, include the ‘http2’ 
module and enjoy the significantly increased processing 
speeds. However, do keep in mind that the benefits can 
only be harnessed if the client also fully understands the 
HTTP/2 protocol and how it works. 


const http2 = require('http2’); 
const fs = require('fs'); 


const server = http2.createSecureServer ({ 
key: fs.readFileSync(’ localhost-privkey.pem’), 
cert: fs.readFileSync('localhost-cert.pem’ ) 
195 
server.on(’error’, (err) => console.error(err)); 
server.on(’socketError’, (err) => console.error(err)); 


Developers creating the error-handling parts of an 
API face a difficult trade-off - returning textual errors 
makes emitting them to the console easier, while using 
numeric constants simplifies programmatic handling. 
Node.js 9 now gives developers the best of both worlds - a 
set of error codes specified in https://nodejs.org/api/ 
errors.html#errors_node_js_error_codes can be used to 
facilitate error comparisons. Eliminating string constants 
from programs is considered a superbly efficient 
refactoring - if there is one feature in Node.JS you ought to 
use, it definitely is this one. 


OLD 
if (err.message === 'Can\'t set headers after they are 
sent.’) { 

NEW 
if (err.code === 'ERR_HTTP_HEADERS_SENT’) { 
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As complex as Node.JS is, it also makes use of 
various libraries contributed by third parties. Almost all of 
them received updates in the last few months - the Node 
team used the release of the new version to upgrade. This 
brings a variety of improvements - for example, the V8 
interpreter received optimisations leading to 
impressive improvements. 

Sadly, this improvement also meant that some old 
experimental or deprecated APIs were removed - be 
careful when updating a solution. 


Like most large software products, Node.JS had its 
fair share of oddities. For example, the HTTP error 400 was 
not supported - if bad data came in via a HT TP stream, the 
socket was closed. This behaviour caused grief when the 
‘opposing’ end expected a formally correct implementation. 
Node.JS 9 busts a lot of these problems, making sure that 
the product plays nicely with various other components. In 
addition to that, read-only flags and method return values 
were adjusted; this is intended to make errors show up 
much, much faster. 


Well-placed statements simplify the detection of 
error conditions. The latest version of Node.JS allows 
additional error codes in asserts, thereby allowing 
statement logic to expose information on why the test 
on hand failed. 

One other particularly neat feature involves the exposure 
of the ‘isDeepStrictEqual’ method. Its signature has been 
modified to return an error code instead of throwing, 
thereby permitting developers to harness its comparison 
Capabilities outside of a debugging environment. 


const { isDeepStrictEqual } = require(’util’) 
const isEq = isDeepStrictEqual ({ 
a: 1’ 
tat 
a: 1 
J) 
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AR BIRTHDAY CARD 


http://bit.ly/2ohb7Kk 
https://arexp.glitch.me/birthday-card/preview.html 


C C First a OR code takes you to the 
corresponding site. AFrame and 
ARJjS combine on this webpage to 
see the marker and position the 
Cake appropriately, revealing a fun 
birthday message. It’s definitely been 
my favourite card to make! 93 


ANDRES CUERVO 


VR/AR ARTIST 
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position: 9 

margin: 
width: $0; height: $d; 
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border-radius: 56%: 
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animation: Srev: 
content: 
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Gkeyframes m { 4 transform: 


agkeyframes f { 8% { opacity: 


_Ana Tudor 


console, C"My + my Nome); 


State = “Califa 
B-9, o-z, A-Z 


Vor 


freeCodeCamp 


freeCodeCamp 


bit.ly/2AwivqgM 
freeCodeCamp is a website and 


community for learning frontend web 
development, with a particular focus 
on JavaScript. Its YouTube channel has 
handy pre-made playlists grouping 
videos into particular topics. It also has 
really interesting videos entitled ‘A day 


hip() 4 
width/2; 


this. 


fill }; 
rect(this. 


) 


» Neight 


at’ which give an insight to working at 
some of the largest companies in the 
United States of America. 


SUBSCRIBERS: 227k 
@3 The Coding Train 


bit.ly/1TdluDY 
The Coding Train is an awesome 


YouTube channel where Daniel 
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<= Flexbox 101 # 


Scott Tolinski GS) 


LevelUpTuts 


line Text Foe Gdil Selection Fond View Gos Tool Progecn Window hielp 


2 apps — app, argqulas-tutorial 


angular 
»module('app", f 
"ul. router’ 


-config( [‘SurlRouterProvider’, ‘$stateProvider’, f 


‘urlLRouterProvider.aotherwise(' ys"); 


 STateProvider 
.State('home', { 
urk: ‘/' 


templateUrl: ‘teaplates/home. html’, 


controller: ‘home’ 


State('about', { 
url: "/about’, 


templatelrl: ‘templates/about. html" 
} 


Shiffman posts his creative coding 
tutorials. Daniel's presentation style is 
What makes this channel - he is both 
funny and engaging, and manages to 
keep his tutorials and content 
interesting even when discussing 
difficult and sometimes dry and 
complicated subjects. 


SUBSCRIBERS: 374k 
&3 Ana Tudor 


bit. ly/2kk5iXk 
You will have no doubt seen Ana 


Tudors work before. She’s regularly 
featured on the CodePen homepage 
for her amazing mathematical coding 
Skills. Recently she’s been making 
videos documenting how these 
demos were created. The maths is 
heavy and she talks fast, but watching 
these demos come together is 
absolutely mind-blowing. 


SUBSCRIBERS: Not Shown 


: space-between; 
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LevelUpTuts is a great YouTube 
channel presented by Scott Tolinski. 
Scott has a very distinctive, calming 
and reassuring tone of voice. His 
videos cover a wide range of frontend 
topics covering everything from HTML 
and CSS to WordPress to React and 
everything inbetween. He's also 
recently started a podcast with Wes 
Bos called Syntax. 


SUBSCRIBERS: 275k 


G9 LearnCode.academy 
bit.ly/lyALuAi 

The LearnCode.academy YouTube 
channel is focused on teaching 
JavaScript frameworks covering React, 
Node.js and Angular, as well as the 
basics of JavaScript and ES6. The 
tutorial videos are broken down into 
Short, easy-to-digest parts, enabling 


@ NETFLIX 


Avoid Polling 

» Caves of continuous. veneie of hancdeicih and ererry 
* Unnecessary load on server lor nothing 

* Lavorege Google Cloud Messaging io trigger a neresh 


—— a a 2 i= 
Netflix Ul Engineering 


= © Youlube™ 
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© ingex.phe — basics 


index ; 


<?php 


= "There are * 


" days in the week. ' 


Codecourse 


[el here UI or = , 


UX Mastery 


you to go away and apply what you've 
learned before the next video. 


SUBSCRIBERS: 473k 


€3 UX Mastery 


bit.ly/2gk2xVc 
This channel doesnt have a lot of 


content and isn't posting new videos 


every week like some of the other 
channels in round-up, however the 
content it does put out is always great. 

The videos on the channel are 
illustrated explanations of UX concepts 
and skills, which are skilfully presented 
by industry experts. 


SUBSCRIBERS: 32k 


€ > Google Developer Days 


Google Developers | 


Wes Bos 


10 YOUTUBE WEB 
DEVELOPMENT CHANNELS TO 
POWER UP YOUR CODE CREATION 


Netflix UI 
Engineering 

bit.ly/2ivNsEr 

The Netflix Ul team creates a product 
that is used by over 80 million people, 
providing its service to countries all 
over the world on a wide range of 
devices. Essentially it know a thing or 


two about creating user interfaces and 


this channel documents its work. 


SUBSCRIBERS: 77k 


€B Google Developers 
bit.ly/loVAmLk 

The Google Developers channel 
features talks, events, tutorials, best 
practices, tips and much more - there 
really is something for everyone with 
over 4,500 videos. There are alSo 


playlists for a quick access to particular 


topics and areas of interest. 


SUBSCRIBERS: 7.3M 
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€3 Wes Bos 

bit.ly/2jxDZMY 

Wes Bos is the author of a number of 
online courses teaching a variety of 
frontend topics. His YouTube channel 
features a number of free courses, 
including the immensely popular 
JavaScript30 course. He also has 
courses covering flexbox, markdown 
and other web development subjects. 


SUBSCRIBERS: 34k 


Codecourse 


bit.ly/2jwPww4 
The Codecourse YouTube channel is 


PHP focused. It contains playlists 
covering different subjects and 
frameworks. With a number of 
beginner topics this channel is great 
for someone just getting into web dev. 
Good for intermediate programmers 
looking to learn frameworks. 


SUBSCRIBERS: 278k 
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USING THE LATEST AND GREATEST PROTOTYPING TOOLS CAN HELP e 
VOU GET USER FEEDBACK EARLY ON, AND MAKESURETHAT WHAT 
YOU BUILD OFFERS THE VERY BEST USER EXPERIENCE y 
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BUILD WITH ORIGAI 


In a world where users have high 
expectations of their experience on 
the web and mobile, prototyping 
and user evaluation is key. A good 
or bad user experience can make 
or break your site or app, and 
therefore you often wont want to 
jump straight in and build the final 
product only to have to go back 
and change much of your code at sn 
a later stage. 

Instead, it's now common to 
progressively iterate on prototypes 
with increasingly high fidelity, and a 
flourishing user experience 
industry has grown up around this 
critical set of activities. Ultimately, 
getting software right at the 
jc prototyping stage saves you time 
anc and/or money later on. 

There are many approaches you 
can take to prototyping, and 
ce dave HUMECOUSMOCls OU iMere te@lassist: 

thorouat Of course, almost every designer 

»xperie nc 2 has their opinion on which tool or 
ava uation. LOOIS WOrk Dest. One of tne newest 
ant on the block is Origami Studio, 
developed by Facebook and 
before it’s shown 1 available free for macOS. Origami 
users. and desic 1e} C Studio, which actually started its 

re | Or life as a plugin for Quartz 
Composer (a visual programming 
». This i language within macOS's Xcode 
tvping tools development environment) before 

; becoming a standalone tool, has 
gained a great deal of attention 
over the last year. This is not only 
: and you’! because it is built by a big-name 

fl e pene Tits. developer, but also because of the 
combination of power and 
simplicity it brings to developing 
high-fidelity, interactive prototypes. 


TT PROTOTYPING APPROACHES wacsis teeest wav 


REASONS TO 
USE ORIGAMI 


REAL-TIME PREVIEWS 


The preview window in Origami is always open, so 
you can constantly see the state of your work while 
youre modifying it, without the need to save and 
build or open in a browser as is the case in some 
other tools. Then there’s the Origami Live mobile 
app which allows you to mirror your Origami Studio 
prototype on an actual mobile device. 


HIGH-FIDELITY INTERACTIONS = 


Prototyping isn't just about the visual y Sapir tach eee 2 acti pe Nett 
look and feel of a site or app, but also : saiaclalinia ua 
about understanding user interactions 

and making sure the functionality is 

simple to learn and use. Often interaction 

is modelled by stitching static prototypes 

together, but Origami offers a more sophisticated ‘Patch’ framework to 
allow interactions to be modelled with a high level of fidelity without the 
need for programming. 


NATIVE PLATFORM SUPPORT 


— Origami Studio leads the way in providing support 
for native mobile platform features such as 
direction, vibration, and haptic feedback. Want to 
respond to 3D Touch events on an iPhone? 
Origami has built-in functionality to simulate this 
and let you respond to the level of force. A wide 


range of different devices are supported. 


I$ Now common to 
progressively iterate on 
prototypes with increasingly 
high fidelity, and a flourishing 
user experience industry has 
grown up around this critical 
Set of activities 


STITGH TOGETHER STATIC MOCKUPS 


This can be a quick, easy way to get 
started, especially to show visual 
design. It’s not uncommon for 
designers to use Illustrator, Sketch, 
or similar to create static mock-ups, 
then show directly to users to 
evaluate or distribute to developers. 
Interactions can be expressed using 
annotations or voice-over. This 
approach is often used for 
low-fidelity prototypes preceding 
higher-fidelity design, using 
wireframing tools like Balsamiq. 


USE AN INTERACTIVE 
PROTOTYPING TOOL 


Origami Studio is one of a number 
of both free and commercial 
high-fidelity prototyping tools out 
there. Proto.io is another popular 
one. These tools bring a great 
balance between being able to 
throw something together quickly 
without needing to code, while 
enabling interactive functionality to 
avoid any ambiguity for developers 
or users. However, it does meana 
new skillset and tool to learn. 
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JUST GODE A PAGE 


Sometimes it’s easiest to code up 
the basic functionality to test it out. 
This is particularly true if there isn’t 
a separate designer working on the 
app, and made easier by the extent 
to which frameworks prefabricate 
components. This gives the highest 
fidelity experience to users if you're 
evaluating, but may mean that 
iteration is more time-consuming. It 
also abstracts you from any 
constraints of the functionality 
available in prototyping tools. 
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INPUTS & OUTPUTS 


The behaviour of prototypes in Origami 
Studio is controlled via ‘patches’, which 
are essentially functions that take inputs 
(such as user interactions or numeric 
values) and generate outputs which can 
then be used to modify attributes of the 
visual layers in your prototype. For 
example, a patch that outputs a value 
between O and 1can be used to control 
the opacity of an image. Pre-defined 
patches that ship with Origami are linked 
together into a visual flow to create 


complex behaviour. 


Meow fea mple.ori gam 


Sectehs 
= Kip On) oat = 


* Turn On 
® Tien OF 


READY-MADE LAYERS 


In the bottom right of the Origami 
Studio window, you'll see a list of all 
layers present in your prototype. This 
behaves as you might expect if you’ve 
worked with layer-based graphics tools 
before, and you can drag to reprioritise 


layers, group them together, and so on. 
Typically your layers might include 
images, text and Static colours, but 
Origami also ships with a selection of 
pre-fabricated ones such as mobile 
keyboards and status bars to allow you 
to more easily mimic an actual device. 


INSTANT UPDATES 


Origami Studio’s preview area allows you not only to view 
the appearance of your prototype, but also to test out 
interactions with it. You can select from a range of different 
media including phones, tablets, laptops and smart TVs to 
display your work on. The best part, however, is that it’s 
always open and updates instantly when you make changes 
to the design or functionality, so you'll be able to see the 
impact straight away. 


Harts 
Enable 
Position 
Anchor 
Size 
Opacity 
Background 
Radius 
Clip Content 
Scale 
Rotation 
Pivot 
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Position 
BE cati 
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Be cats 


®@ heart_green 
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Background 


WORKING WITH LAYERS 


Since Origami Studio is a layer-based 
system (think similar to Photoshop), 
depending on which layer of your 
prototype you currently have selected, it 
will display a set of properties you can 
modify. This allows you to position layers 
on the screen, resize them, recolour, and 
soon. Most critically, dragging the output 
of a patch to a property will link them, 
enabling the patch to control the 
behaviour of that layer. The + symbol just 
above this area enables you to add new 
layers to the screen. 
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YOUR FIRST APP HERE'S HOW TO EASILY GET INTERACTIONS WORKING 


' meow-example 


dew/origami-tutona 


Origami Studio 


Wersion #OF 21/42 


” New with Moto G 
© New with iPhone 8 


(©) New with Mac Window 


1. A NEW PROTOTYPE 


We're going to create a prototype for a 
mobile app which will allow us to 
Swipe through pictures of cats and 
‘like’ some of them. Once we've 
installed Origami Studio, we'll create a 
new iPhone 8 prototype from the 
splash screen. 


2. ADDING LAYERS 


We can start to add some layers to 
our prototype straight away. In this 
case, we'll add a logo positioned at the 
top of the screen. We add the layer 
using the + button in the top right and 
selecting ‘Image Layer’. We can then 
resize and position it appropriately by 
highlighting and modifying the layer’s 
properties. After our brand, we'll also 
add a heart image at the bottom of 
the screen to serve as our ‘like’ button. 


3, GREATING AN INTERACTION 


We need to make our heart button 
respond to user interactions. You'll 
notice that in the preview window, the 
cursor changes to represent touch on 
a mobile device. To respond to this, we 
need to create a ‘Patch’, which is 
essentially a function in Origami 

that takes inputs and produces 
outputs. Double-click the empty grey 
area to bring up a list of new patches, 


6 Learn from Examples 
Read the Decumentation 


abt Open Support Group 


Open another prototype... 


and search for ‘interaction’. Place 
your patch and it should appear on 
the screen. 


eas 


Gd heart 


4, LINKING INTERACTIONS 10 LAYERS 


At the moment, your patch will 
respond to touch anywhere on the 
prototype. Test it out by clicking and 
youll see the ‘Down and ‘Tap’ 
properties changing in real time. If you 
select the ‘Layer property in the 
patch, you can link it to the layer 
containing the heart image, and it will 
now only respond to clicks on that 
Specific area. 


3. ANIMATIONS 


Now we want to have something 
happen when our interaction triggers. 
Create another patch, this time a ‘Pop 
Animation’. This is used to create a 
springy effect. Leave the properties as 
they are for now, but we'll create a link 
between the Tap output of the 
Interaction we created previously and 
the Number input of our new Pop 


Interaction 


Down « 
Tap « 
Position « 
Force « 


« Layer Hearts 
* Enable ¥ 


ORIGAMI 
IN ACTION 


Discover the potential 
of what Origami Studio 


can produce by visiting 
the Example Gallery 

3 https://origami. 

» design/examples 


Animation. We do this by clicking and 
dragging between the small circles 
next to each. If you click the heart 
now, you'll now see the interaction 
triggers a change in the ‘Progress’ 
output of the Pop Animation. 


G. TRANSITIONS 


The next thing we need is a Transition 
patch. This will allow us to specify low 
and high values to move between as 
the Pop Animation’s Progress output 
changes. We can then link the 
Transition’s output values to the Scale 
property of the heart image layer to 
tell Origami to resize it when it’s 
clicked. You should now find that 
clicking the heart causes it to animate 
a brief change in size. It’s not quite 
right, however, since it pops back to 
normal straight away. 


T. SWITCHES 


Switch patches are Origami’s way of 
toggling between two states. This is 
What we want for our ‘Like’ button. An 
inout passed to a Switch patch can flip 
it between ‘on and ‘off states, which 
can then be passed as an output to 
Subsequent patches. Let’s create a 
new Switch and place it between the 
Interaction and the Pop Animation. 


Pop Animation 


» Number 
Bounciness 
Speed 


Progress 


YOUR PROTOTYPES 


0 THINGS TO THINK ABOUT WHEN 
EVALUATING DESIGNS WITH USERS 


L IDENTIFY YOUR USER GROUPS 


Testing with real users is 
important, and often yields 
surprising results. But equally 
important is ensuring you test 
with the RIGHT users who 
represent typical usage of your 
app. Personas and looking at 
usage data/metrics can be very 
useful for this. 


2. PLAN YOUR TASKS 
AND QUESTIONS 


Generally you'll want to set 
your evaluation users tasks 
which reflect typical activities 
to be performed with your app. 
You should also plan neutral, 
non-leading questions to pose 
during this process. 


3. ENCOURAGE USER 
CONTRIBUTION 


When you evaluate prototypes, 
youre not just trying to make 


yes/no decisions on elements 
of your design. You should also 
encourage subjective feedback 
and improvement or feature 
suggestions from your users. 
But beware of scope creep! 


4, ITERATE ON YOUR DESIGN 


Typically it takes a few rounds 
of prototyping, at progressively 
higher fidelity, to achieve a 
great design. Allow time to go 
back to the drawing board and 
re-work your prototypes once 
you've gathered feedback, 
then repeat the process again. 


0. BE OPEN 10 BEING WRONG 


We all take pride in our work, 
and when a user gives 
feedback, it’s sometimes 
tempting to spend time 
explaining why we did 
something a particular way. 
This isn’t really a good use of 
time or energy, though. Take 
the feedback, and 
acknowledge that you might 
have got it wrong. 
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In 


» Enable ¥ Tap « 


tee oe a 


You should then be able to click the 
heart to toggle it between small and 
large states. 


6. MORE COMPLEX BEHAVIOUR 


Congratulations! You've now created 
your first interactive feature, using the 
most common patches that you'll find 
you use time and time again. We can 
add more patches to create more 
complex behaviour. Let’s create a 
different coloured heart layer directly 
behind our current one, then add new 
patches both to scale it 
Simultaneously, and modify the 
Opacity of our original layer so it’s 
made visible. Now, when you tap the 
heart, it will toggle larger and smaller, 
but also appear to change colour. 


9, CAROUSEL 


To finish our prototype, let’s add an 
image carousel with the cats we want 
to allow users to ‘Like. To do this, we 
first need to add a group of layers. 
Each image will be a separate layer, 
with increasingly offset x co-ordinates 
so that they essentially sit side-by-size 
in a row with only one visible on 
screen at any one item. 


Switch 


* Flip On / Off « 
® Turn On 
° Turn Off 


Pop Animation 


*® Number © 


* Bounciness 5 


* Speed 10 


Progress « * Progress © 
e Start | 


* End 1.5 


Switch Pop Animation 


# Filp 


* Tum On 
« Tum Off 


10. SWIPING LEFT AND RIGHT 


The last thing we need to do to make 
it work is enable left and right swipes 
to scroll the carousel. We co this by 
creating a Scroll interaction to link to 
the carousel layer group (not the 
individual images). The interaction 
outputs an x co-ordinate which we can 
then link to the x property of the 
carousel to move it. In-between, we'll 
add a Clip patch, which can be used to 
limit values to ensure we co not scroll 
to co-ordinates outside the edge of 
the carousel. 


IT. NEXT STEPS 


That's it. You've created a very basic 
app. You can also use Origami Studio's 
built in ‘frames to place it onto a 
device background, which can help 
give a professional finish. Now that 
youre familiar with the basics of using 
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patches, you can begin to create more 
advanced behaviours. There are 
plenty of guides on the Origami Studio 
website, which explain how to 
implement popular functionalities 
commonly seen in apps. 
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TIME TO STEP 0 
eTHAT TREADMILL 


With so many demands from work, home and family, there 
never seem to be enough hours in the day for you. Why 
not press pause once in a while, curl up with your favourite 
magazine and put a little oasis of ‘you’ in your day? 


PRESS PAUSE 


ENJOY A MAGAZINE MOMENT 
To find out more about Press Pause visit: 


pauseyourday.co.uk 
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Zeta first opened its doors in 2000, 
where its original founder, Roger Allen, 
leveraged his IT contracting and sales 
experience to persuade businesses they 
needed to invest in their web presence. 
With the web still in its relative infancy, 
and the common perception being the 
web was merely a fad, the task was 
challenging to say the least. Despite this, 
the company grew steadily, until 2015 
when it was acquired by the Berkshire 
Hathaway Group - the multinational 
conglomerate headed by billionaire 
investor and philanthropist Warren Buffett 
- providing funding to take the Dorset 
agency to the next level. 


Why name the agency Zeta? Sam Allen 
- Operations Director explains: “When the 
agency was formed, there were just six 
members, resulting in the team choosing 
Zeta, the sixth letter of the Greek 
alphabet. The original domain chosen 
Was zeta-commerce.com. It's now Zeta. 
net; easier to remember and less 
restrictive in terms of brand positioning, 
giving us the freedom to evolve.” 

The website of a design agency is, of 
course, an important calling card to 
prospective clients. Anna Lundstrom 
Silsbury - Project Manager - outlines how 
Zeta approach their design: “We believe 
an agency's site is very important: | 


“We suggest if you are 
invited to attend an 
interview, always 
research the agency and 
ask lots of pertinent 
questions when 
prompted. Experience is 
very important. We 
recommend anyone who 
hasn’t got much working 
experience to get 
themselves out there on 
internships, online 
projects, courses or 
work experience” 


: a 
a 
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2000 


Zeta agency founded 
by six individuals. 
The name Zeta was 
taken from the Greek 
word for the sixth 
letter of 
the alphabet 
employees: 6 
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“We believe an agency’s site is very important; 
it provides an insight into their services, 
portfolio, ethos and approach, as well as their 
brand and its values. We know the first 
experience a prospective client has with a 
website quickly determines whether they wish 
to engage with a company or pass. For this 
reason, we are constantly evaluating our 
target market and what we offer on our site” 


ANNA LUNDSTROM SILSBURY 
PROJECT MANAGER 
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2005 
The agency grew 
and moved from 
Weymouth up to 
Poole and 
Bournemouth, closer 
to London but still on 
the south coast 
employees: 8 


2003 

Created 

our first 
E-Commerce 
website using 
OSCommerce 


2007 


Our first iOS app 
was created for 
Electropages 
using PhoneGap 
employees: 9 


2015 
The company is 
acquired by the 

Berkshire Hathaway 
group 
employees: 15 


2012 
Our first 
Android 
app was 
created 


2015 
Created a 
native iPad app 
for BMW 
employees: 14 
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Operations 


Mobile App 


Specialists 


it provides an insight into their services, 
portfolio, ethos and approach, as well as 
their brand and its values. We know the 
first experience a prospective client has 
with a website quickly determines 
whether they wish to engage with a 
company or pass. For this reason, we are 
constantly evaluating our target market 
and what we offer on our site.” 

Anna continues: “For example, a recent 
audit of our site highlighted the need to 
change our vernacular, positioning us as 
a more jargon-free agency. It also 
highlighted the need to show a more 
diverse range of clients and services. 
Other recommendations included 
changing the site content more regularly 
and the release of specialist papers and 
articles. AS a result, we're building a new 
site, which is due to launch prior to 2018. 
Post launch, time is being dedicated to 
provide regular content updates.” 

Often, an agency will move through 
various stages of development. Initially 
clients are attracted via a number of 
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channels. For Zeta, their takeover was a 
pivotal moment, as Sam explains: “Since 
being acquired, the momentum of the 
company has sped up significantly. 
Although the majority of new business 
comes from referrals and digital-related 
industry talks given by our staff, we will 
be actively pursuing new clients during 
2018 via new account managers.” 

Craig Dyball - Managing Director - 
also says: “Due to our current client 
base, we have naturally evolved into 
specialising in the electronics industry, 
providing websites, apps and digital 
marketing for one of the world’s largest 
eCommerce stores. Were also 
Significantly involved within the tourism 
industry, providing the full soectrum of 
digital services. Involvement in these 
areas means we generally pick up 
synergistic clients as we go. 

“Although our current project 
spectrum target is £15k-E25O0k, we dont 
shy away from larger projects due to the 
Support from the Berkshire Hathaway 
Group, which allows us to expand quickly 
to cater for them. 

In other words, if a job requires new 
team members, we can do it. We wont 


awit take on a job we cant complete within 
Designers budget or allocated timescales. This 


approach preserves our long-standing 
@ reputation for reliability and delivery, 


seteris keeping our clients happy. In addition to 
Engineer external clients, the internal clients 


serviced within the Berkshire Hathaway 
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Digital Designer Caleb 
deep in concentration on 
Zetass latest project. What 
would design studios do 
without the Post-it note? 


wih 

oh 
Mobile design has 
become a vital component 
across Zeta. Zofia, Paul, 
Becki and Joe discuss 
a tablet project. 


Group means there's always plenty of 
up-and-coming work.” 

The workflow that an agency develops 
often needs to be agile to respond to the 
specific demands of each piece of work. 
For Zeta, flexible working has become 
second nature, as Anna explains: 
“Large-scale timelines vary depending on 
the scale of the project. Some projects 
are ongoing - such as Mouser.com - with 
dozens of ongoing, rolling projects with 
completion deadlines many years from 
now. For smaller, large-scale projects, we 
generally aim to complete them within six 
to seven months. 

“Whichever type of project, we aim to 
break them down into manageable 
deliverables. This means our work can 
add value to a business, at a quicker 
pace, and be responsive to changes. The 
following roles are normally included in 
all web or app projects: Project manager, 
Team leader, UX designer, UI designer, 
Full-stack web developers, Native app 
developers, Marketing expert with SEO 
Skills and QA testers. 
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With a range of interactive activities at the Winchester Science Centre, 
Zeta developed an engaging ad campaign that showcased what it had to offer. 


“The project is then split into: Planning 
and exploration, wireframe, prototyping 
and design, backend and feature 
development, themes, content 
population, marketing review and testing 
and deployment. Generally, the most 
time-consuming parts of a project are the 
first and last stages. Ensuring the 
planning and exploration stage is 
undertaken meticulously is essential, as 
this forms the blueprint for the project. 
The final stage, testing and development, 
is equally important to ensure the project 
is delivered working correctly.” 

After the workflow is in place, the 
toolset that an agency chooses to use 
can be diverse. For Zeta, which works 
across multiple channels, the tools in use 
have been evolving for some years. Paul 
Barnes outlines their current approach: 
“During the design stages of a project 
we use Axure to create interactive 
wireframes and prototypes to outline 
all content requirements and client 
expectations. After the wireframes have 
been confirmed, we create hi-fidelity 


— 


If CSS is to 
avoid 
becoming 
irrelevant in 
the near 
future, it 
will need to 
continue to 
add new 
features 
and 
capabilities 


designs using the Adobe Creative Cloud 
Suite and the Sketch app. 

“To create our native applications, we 
use IDE’s Xcode and Android Studio. Our 
web team uses open source applications, 
such as Sublime, to create its web 
projects. Our design team hands over 
assets to our development team using 
Axure, which outlines all navigation. For 
animation-based interactions we use 
Zeplin, allowing developers to pull assets 
and measurements from the designs. 

“Using web tools, such as Cage App 
and Gather Content, we share designs 
and content with our clients to allow 
them access to the work in progress, and 
to give feedback during the project.” 

Caleb Kingcott - Digital Designer - 
also explains Zeta’s approach to current 
design technologies: “Both CSS and 
HTML have been fundamental to web 
development for years, something we 
don't see changing anytime soon. 
However, we agree with the popular 
consensus that HTML and CSS will 
need to adapt to stay relevant for 
modern web development. 

“Over the last few years, the biggest 
change in web development is the 
importance of targeting mobile devices. It 
wasnt too long ago that a mobile website 
Was an afterthought for a developer, 
something that was a nice extra, which 
would only be seriously considered if the 
budget allowed. However, In April of this 
year, SimilarWeb published data 
Suggesting mobile traffic makes up 
nearly 56 per cent of all web traffic. With 
this is mind, it’s important that HTML and 
CSS adapt to this change in hardware. 

“HTML has adapted and will continue 
to adapt to this change by taking 
advantage of mobile hardware. One 
example of this is HTML5 web storage, 
which gives a web app the ability to store 
large amounts of data locally. Future 
versions of HTML could even support 
further local features such as the device's 
camera and fingerprint scanner. 

"CSS is used for styling, so the 
challenge of targeting mobile devices is 
catering for a smaller screen. CSS has 
accomplished this by making responsive 
web design possible, allowing websites to 
target many different screen sizes rather 
than just a desktop. If CSS is to avoid 
becoming irrelevant in the near future, 
it will need to continue to add new 
features and capabilities, which will give 
websites and web apps the ability to 
provide a visual experience that’s ona 
par with mobile apps. 


, 
Zeta 


“JQuery is gradually being replaced by 
JavaScript frameworks, such as React, 
especially for web apps. Frameworks are 
far more capable, with a number of 
different features, so there has been a 
Shift to these over libraries such as 
JQuery. However, the technology still 
remains relevant for websites and small 
web apps, which dont require a full 
framework, and JQuery still has a large 
market share, so is likely to be around 
for some time. 

“Laravel 5 has appeared on the 
office radar recently. It’s a useful PHP 
framework that makes web building 
easy and sharing projects between our 
developers simple. It’s been around for 
a little while now, but we're beginning to 
utilise it more frequently, mainly because 
it’s quick to implement and comes with 
a whole host of time-saving abilities, 
Such as quick-build user authentication 
for applications.” 

Speaking further about the importance 
of designing for mobile channels, George 
Grover - UX and Design - says: “Zeta 
advocates building fully responsive 
website solutions that deliver an 
uncompromising experience across all 
devices without restricting or hiding key 
content. We plan, wireframe, prototype 
and design with a fluid mindset. We're 
always thinking about the content in > 


“To create our native 
applications, we use IDE’s 
Xcode and Android Studio. Our 
web team uses open source 
applications, such as Sublime, 
to create its web projects. Our 
design team hands over 
assets to our development 
team using Axure, which 
outlines all navigation. For 
animation based interactions 
we use Zeplin, allowing 
developers to pull assets 
and measurements from 
the designs” 


PAUL BARNES 
UX/ Ul DESIGNER 
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“Zeta advocates building fully 


responsive website solutions that 
deliver an uncompromising experience 
across all devices without restricting 
or hiding key content. We plan, 
wireframe, prototype and design with 
a fluid mindset. We’re always thinking 
about the content in relation to the 
devices it will be used on to ensure 


relation to the devices it will be used on 
to ensure its presented appropriately. 

“Often, this process is an ever- 
tightening, spiral workflow of planning, 
designing, testing, and iterating, which is 
repeated until the process satisfies all 
aesthetic and functional requirements. 
Responsive design is something our 
customers expect and has simply 
become a natural part of our overall 
workflow. Because we're addressing 
responsive design right from the offset 
(using rapid prototyping), we're 
investigating mobile user flow in parallel 
with desktop, before development starts. 

“Making use of software, Sketch and 
Axure, were able to fully explore the 
breakpoints for different devices. 
Animated and dynamic elements help us 
understand the full story and ensure 
were equipped with all the info we need 
before develooment begins.’ 
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it is presented appropriately” 


Anna concludes: “Whilst using a fully 
responsive solution may require more 
resource and time early in the planning 
and design process, it pays back during 
the development process. During the 
development process a clear 
understanding of the holistic plan 
can be more fully understood - not to 
mention the cost and time advantages 
of running an entirely separate app for 
mobile, which may have dedicated 
pages and possibly a database. With a 
fully responsive solution, we keep 
ongoing maintenance and security costs 
down whilst ensuring professional 
consistency for all our clients’ brands.” 

To deliver the high-quality work Zeta 
has become known for requires high 
calibre staff. As Craig succinctly tells Web 
Designer. “Our organisation is only as 
good as our team.’ A level of inherent skill 
is important but, as Craig continues, 
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understanding what drives each 
candidate Zeta interviews is much more 
important when finding the next person 
to join the team. 

“We understand that most people 
dont feel comfortable during the 
interview process, SO Our management 
team draw out the important information 
from candidates. Obviously, skills are 
important, but on top of this we are 
looking for self-motivated team players 
who are eager to progress their own 
abilities, solve problems and have 
a strong drive. 

“Also, we suggest if you are invited 
to attend an interview, always research 
the agency and ask lots of pertinent 
questions when prompted. Experience is 
very important. We recommend anyone 
who hasnt got much working experience 
to get themselves on internships, online 
projects, courses or work experience. 
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“We truly value our staff which is why it 
is vital that our working environment is 
pleasurable. The essence of a successful 
business is that the people actually 
enjoy coming to work and have time to 
develop their skills whilst being here too. 
We think that our success is directly 
linked to our location and lifestyle. We are 
only two hours by train from Waterloo 
with a five-minute walk to the station but zeta.net 
much more importantly, Poole Harbour is na anal 
only minutes away.’ 


To meet the needs of its expansion, FOUNDER: Roger Allen SERVICES 
Zeta is now remodelling its Poole office App Development 
Space, as you read this.. The agency's YEAR FOUNDED: 2000 — : 
trajectory is clear: with a deep 2 MeU ELL) 
understanding of not only the digital CURRENT EMPLOYEES: 22 Web Design 
Spaces it designs for, but also an Strategy 
=P PNR SIORe nro NDS Wc Omnmumnleations LOCATION: Poole, Dorset eCommerce 


is shaped by today’s digital channels, 
Zeta is the maker of the environments z 
we all live within. 
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http://ladybird.movie 
Designer: Watsondg — http://watsondg.com 


Developmenttechnologies jQuery, Underscorejs, HTML5 Boilerplate, Marionette js 
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66 Greta Gerwig’s coming-of-age 
movie Lady Bird presents a charming 
promo site that delivers fullscreen 
video clips via a drag-and-drop quiz 99 
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Create a visually 
dynamic sliding quotes box 


Use HTML, CSS and JavaScript to present an automatic sliding quotes box that can be easily updated 


1. Initiate HTML document 
The first step is to initiate the document that will define 
the HTML page. This consists of a HTML container that 
stores the head and body sections. While the head 
section stores links to external CSS and JavaScript, the 
body section will store the visible content created in the 
next step. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Quotes List</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script type="text/javascript” src="code. 

js"></script> 

</head> 

<body> 

*kk STEP 2 HERE 
</body> 
</html> 


2. HTML content 


The page content consists of a container labelled with a 
data-player’ attribute. This container stores the individual 
quote elements - represented as span elements. Each of 
these contain the content for the individual quotes; this 
example uses a h3 title followed by a paragraph element. 
This structure’s presentation will be controlled via the 
JavaScript and CSS. 
<div data-player> 

<span> 

<h3>Title 1</h3> 

<p>Text...</p> 

</span> 

<span> 

<h3>Title 2</h3> 

<p>Text...</p> 

</span> 

<span> 

<h3>Title 3</h3> 

<p>Text...</p> 

</span> 

</span> 


3. JavaScript initiation 

Create a new file called ‘code js. This file starts with the 
initiation of two features: a ‘quote’ variable used to 
describe the current quote to show, along with a function 
to update the quote. The updateQuote function searches 
for all quotes inside data-player and updates their 
data-status to be ‘shown or if their index position 


matches the ‘quote’ variable. The quote variable is then 
updated for the next time updateQuote is called. 
var quote = Q; 
function updateQuote(){ 
var nodes = document. 
querySelectorAll("[data-player] > *"); 
for(var i=@; i<nodes.length; i++){ 
if(i == quote)nodesLi]. 
setAttribute("data-status”, visible”); 
else nodesLi].setAttribute("data- 
status”,””); 
i 
if(quote < nodes. length-1)quotet+; 
else quote = Q; 


I 


4.Load event 
The last part of the JavaScript code defines what 
happens after the page has completed loading. The 
page's quote display needs to be updated immediately, 
hence the call of the updateQuote function. This 
updateQuote function is also called every 6,000 
milliseconds (six seconds) through the use of the 
setinterval instruction. 
window. addEventListener("load”, function() 
t 
updateQuote() ; 
setInterval (updateQuote, 6000) ; 


5 
5. Initiate CSS 


With the JavaScript complete, create a new file called 
styles.css. The first rule in this file sets the HTML 
container and its body section to display across the full 
size of the browser window. A black background with 
white text is also applied, along with elimination of visible 
border spacing. 
html , body{ 
display: block; 
width: 100%; 
height: 100%; 
margin: Q; 
padding: Q; 
font-family: Helvetica, sans-serif; 
background: #0QQ; 
color: #fff; 
Hf 


6. Quote player 
The container for the quotes allows for consistent control 
of each quote. As well as needing to have a size and 


LightBox 
Lady Bird 


default font size, relative positioning is applied so that the 
inner child items can be positioned in relation to 


wherever this parent container is located. This container 
is referenced via its data-player’ attribute. 
[data-player ]{ 
position: relative; 
width: 2@em; 
font-size: 2em; 


I 


7. Quote items 
Each of the quotes are child items inside the ‘data-player’ 
container. These children are set to display with the 
attributes they should animate towards when they 
disappear from view. This is set at 10em from the top of 
the container with opacity set to invisible. Any changes 
appear animated due to the applied transition rule. 
[data-player] > x{ 

display: block; 

position: absolute; 

top: 10em; 

left: Q; 

border: 1px solid #fff; 

padding: .5em; 

width: 100%; 

Opacity: Q; 

transition: all 1s; 


} 
8. Visible status 


The quote item selected via JavaScript’s updateQuote 
function has a data-status' attribute set to ‘visible. This 
allows CSS to set a separate presentation rule to the 
other quote items. In this case, opacity is set to full 
visibility, as well as the vertical position being set to the 
top of the parent container. 
[data-player] > [data-status="visible” ]{ 
Opacity: 1; 
top: Q; 
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Create an animated content 
background ping effect 


Use HTML and CSS to create a background effect that will help draw attention to specific content 


1. Initiate HTML document 


The first step is to create the HTML document that's 
responsible for storing the page details and its content. 
The document has an HTML container, which stores a 
head and body section. While the head section's primary 
purpose is to link the external CSS file to the page, the 
body section will be used in Step 2 to store the visible 
page content. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Background Ping</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

</head> 

<body> 

*k* STEP 2 HERE 
</body> 
</html> 


2. Page content 
The page content consists of a main container for the 
primary page content, followed by a container for the 
‘ping effect. The ping container requires an inner 
element to be controlled as the visible circle element. 
For SEO purposes, the ping container is placed at the 
bottom of the HTML. 

<main> 

<h1>Content</h1> 
</main> 
<span class="ping”><span></span></span> 


3. CSS initiation 


With the HTML now complete, create a new file called 
‘styles.css. The first step for the CSS is to define the 


HTML and body containers. These need to cover the 
full browser window, along with having their default 
colours set. Margins and paddings are set to guarantee 
no visible border spacing. 
html , body{ 
display: block; 
width: 100%; 
height: 100%; 
margin: Q; 
padding: Q; 
color: #fff; 
background: rgb(21, 34, 47); 
} 


4. Main content 
The page's primary content inside the main container 
needs to be placed above the animated background. 
This is achieved using absolute positioning so that a 
z-index of one can be applied. Left and top attributes are 
also applied so that the container is guaranteed to be 
positioned in the top-left corner. 
main{ 
position: absolute; 
z-index: 1; 
top: Q; 
left: Q; 
} 


5. Ping container 

The ping container is required to be positioned in the 
top-left corner. A z-index of zero is applied, placing it 
below the main content container, meaning that the 
animation effect will not interfere with the primary 
content. Width/height are set to make the ping container 
cover the full size of the html/body container. 


how will we live in the year 2030? 


apply now 


. ping{ 
position: fixed; 
z-index: Q; 
top: Q; 
left: Q; 
width: 100%; 
height: 100%; 

i 


6. Ping circle 
The child element inside the ping container becomes the 
animated circle. This step applies attributes to set this 
element's position to the top-left corner, sized to fit the 
full page and to have a solid red background colour. A 
‘ping animation is also applied, set to repeat infinitely 
over a two-second duration. 
.ping span{ 

position: absolute; 

display: block; 

top: Q; 

left: Q; 

width: 100%; 

height: 100%; 

background: #cQQ; 

animation: ping 2s infinite; 


I 


7. Animate ping 
The ping animation sets the previous step to display as a 
circle at the centre of the container. This animation starts 
from invisibly positioned in the middle of the screen, 
upon which it appears at full opacity. The animation 
progresses towards displaying the circle to cover the full 
screen at zero opacity - that is, fading out. 
@keyframes ping { 

O%{ 

-webkit-clip-path: circle(@% at center); 

-moz-clip-path: circle(0@% at center); 

clip-path: circle(®% at center); 


Opacity: Q; 

} 

10%{ opacity: 1} 

10Q%{ 

-webkit-clip-path: circle(30% at 
center); 


-moz-clip-path: circle(30% at center); 
clip-path: circle(30% at center); 
Opacity: Q; 
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Discover another of our ereat't bookazines 


From science and history to technology and crafts, there 
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Site branding 

The site branding remains 
visible on the screen and shows 
the main logo of the V in situ 
with the name. This helps to 
establish the animated version 
in the main display. 


Glitch text effect 

Every once ina while, or when 
the user rolls their mouse over 
the text, the text gets some 
glitch effects that break up the 
text with animated rectangles. 
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Interactive prompt 
The user is prompted to scroll 
down the screen by an 


animated line at the bottom of 
the screen, which shows there 
is more content available. 


1 
a 


| 


1S 
i 7 
the, ae) & 
6°) Visiblemenu 
i | The menu is available in the top 
Hh 


right hand corner, and the bottom 


y right corner has a link ready to take 


users right into the Portfolio. 


L0G MENY _— 


PORTFPLIG 


Animated logo 

The Vintage logo is based on a stylised 
V shape and it is recreated on the site 
by being made up of points that 
animate and move with 
interconnected lines and polygons. 


_EXPERT ADVICE 


Showing your flair 

The Vintage site really shows off the 

talents of the studio. Every animation 
_is executed espe and some 

of the subtleties 


onto the screen and filling in with © 
gradient lines - can almost be missed 
as other, more attention-grabbing 


of the text =!drawing 


Implement a glitch effect on hover 
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Glass particles and a VR portfolio 
Were happy to introduce you to the new Vintage website - with a pinch of 
glitch, interactive scroll, and a lot of love in every detail. Step into the first screen, 


<comment> | discover a logo with a pulsating form of polygonal glass particles and go 
exoertethrk | forward to the thrilling VR portfolio built with Web VR. 


of the site | Olga Shevchenko, Creative Director / Svetiana Lazareva, Motion Designer at Vintage 


Technique 


1. Creating a simple glitch effect 
Creating a simple glitch effect can be done in so many 
different ways. Here we are going to do it by having an 
animated GIF over the top of the text, which will be 
turned on and off in the display. First up, add this code to 
the body tag of your page. 

<div id=”holder” onmouseover=’glitch()”> 

<div id=”glitch’></div> 

WEB 

<br> PRODUCT- 

<br> ION 

</div> 


2. Styling the display 

The content will use a specific typeface from Google 
Fonts called Work Sans. Grab the link from there and 
place it in your head section; then add the CSS to either 
style tags or a separate CSS file. The page is made black 
with white text and the holder is styled up for the text. 

| body { 

background: #0QQ; 

font-family: ‘Work Sans’, sans-serif; 

color: #fff; 

} 

#holder { 

font-size: 6em; 

width: 5@Qpx; 

height: 3QQpx; 

margin: @ auto; 

position: relative; 
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3. Displaying the glitch 

The glitch effect is going to be a background image that 
is placed directly over the top of the text. The important 
part here is that it is made invisible by reducing the 
Opacity to zero so that it doesn't show up until the user 
interacts with the text. 


#elitch { 

position: absolute; 

top: Q; 

left: Q; 

z-index: 10; 

width: 100%; 

height: 100%; 

background: url(glitch. gif); 
opacity: Q; 

y) 


4. Hold everything 


Add script tags to the end of the body section and create 

a cached reference to the ‘glitch’ div in the document. 

Then a variable named ‘over is set to false. This will be 

turned on and off when the user moves over the text. 

| var gl = document. getElementById(“glitch’”) ; 
var over = false; 


5. Running the glitch 
The glitch function is called when the mouse moves over 
the text. If the glitch is not running then the glitch visibility 
is turned on and it is turned off after one and a half 
seconds. You can experiment with this and use a random 
number to make it more unpredictable. 

function glitchd) { 

if (over == false) { 

gl.style.opacity = “1”; 

setTimeout(function() { 

normal () ; 

}, 1500); 

} 

y: 


6. Back to normality 
The glitch effect should not stay on as it would be too 
annoying to the user, but as an interactive element it 
works well. Here, the code resets the opacity back to zero 
So that it isn't visible over the top of the text. 

function normal() { 

gl.style.opacity = “Q”; 

J 
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ost web designers are constantly 
looking for ways to add a big 
impact to their site designs, as 
directed by clients to grab their 
users attention. [his has evolved over the years from 


using a header graphic, to a slideshow under the menu. 
This later became full browser width, and now the vast 
majority of sites follow that same format. The sites that 
win ‘site of the day’ on the different web awards sites 
generally try and do something that is a little more 
unique than just having a giant slideshow. WebGL is great 
for this as adding something interactive can really grab 
the users attention and show that this isn't the same as 
the other sites they've just visited. 

To make a splash in this tutorial, a liquid, reflective 
Surface will be added and this will be animated towards 
the camera with rolling waves moving forward. There will 
also be particles that will move forward to complete the 
look and feel. In the centre will be the site’s logo, and the 
whole scene will react to the user's mouse movement so 
that the content shifts and makes the 3D really stand out. 
The logo is just a transparent PNG so this can easily be 
customised to your own design. The lights will also 
animate so that the colours will orbit around and highlight 
the different waves within the scene. 


1. Initial variables 
Open the start folder from the project files and drag this 
into your code editor. Open ‘index.html and you will see 
that the JavaScript libraries have already been linked up 
for you. Inside the empty script tags is where the code will 
go. Here WebGL is detected to make sure the project can 
be run, then a whole range of variables are added that will 
be used in the scene. 

if (!Detector.webgl) Detector. 

addGetWebGLMessage() ; 

var SCREEN_WIDTH = window. innerWidth; 

var SCREEN_HEIGHT = window. innerHeight; 

var renderer, camera, scene, moverGroup, 


floorGeometry, floorMaterial, pointLight, 


pointLight2, pGeometry; 

var FLOOR_RES = 60; 

var FLOOR_HT = 650; 

var stepCount = Q; 

var noiseScale = 9.5; 

var noiseSeed = Math.random() * 100; 


2. More variables 
The next block of variables handle how large the water 
floor should be and the speed that it will move along with 
initial mouse positions. The centre of the screen is worked 
out and the improved noise library is being used to create 
the surface of the water. 

var FLOOR_WIDTH = 3600; 

var FLOOR_DEPTH = 4800; 

var MOVE_SPD = 1.9; 

var mouseX = Q; 

var mouseY = Q; 

var windowHalfX = window.innerWidth / 2; 

var windowHalfY = window.innerHeight / 2; 

var snoise = new ImprovedNoise(); 

var textureLoader = new THREE. 

TextureLoader () ; 


3. Calculating the mouse 

Some final variables are added for the post processing 
effects of the scene. An event listener is added that 
checks the mouse movement. The scene is going to 
move in the display port to react to mouse movement. 
The function that is added here works out the amount of 
movement being allowed. 


4. Post processing settings 

The ‘params function is where all the settings for the post 
processing effects will be stored. If you need to change 
anything, this is the place to do it. The tilt shift blur is 
covered in the first four lines, then the film pass in the 
remaining lines. This is mainly for the screen intensity and 
noise intensity. 


Tutorials 


5. Final parameters 
The last of the parameters is for the dark vignette around 
the edge of the screen. The ‘init’ and ‘animate’ functions 
are called to run. The ‘animate’ function will be created 
much later in the tutorial, but the ‘init’ function is created 
here. The camera and scene are set up to allow viewing of 
the 3D content. 
effectVignette.uniformsL“offset”].value = 
L2G: 
effectVignette.uniformsL“darkness” ].value 
= Les! 
i; 
initQ; 
animate() ; 
function init() { 
camera = new THREE.PerspectiveCamera(7Q, 
window.innerWidth / window.innerHeight, 1, 
4000) ; 
camera.position.z = 2750; 
scene = new THREE.Scene(); 
scene.fog = new THREE.FogExp2(@x1c3c4a, 
@.00045) ; 


6. Letting the light in 
In order to see the content of the scene, four lights will be 
placed. The first is a hemisphere light, which is used just to 
get the basic ambience of the scene. Next up is the centre 
light that is adding a light blue light in the middle of the 
scene. This is set off to one side in order to give some light 
to the whole scene. 
var hemisphereLight = new THREE. 
HemisphereLight (Qxe3feff, @xe6ddc8, 2.7); 
scene. add(hemisphereLight) ; 


WebGL scene basics 


A basic WebGL scene needs three things to 
make it work: a scene to hold everything, 
something to see in the scene such as a model, 
and finally lights to illuminate that model. 


Left 

When the first liquid surface is added the reflection map 
on this is very obvious and the fog helps blend the 
background and surface together 


Top 

Floating particles fill out the scene, and when all of this is 
animated in the render function, it brings a sense of 
movement towards the camera 
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hemisphereLight.position.y = 300; 

var centerLight = new THREE. 
SpotLight(@xb7f9ff, 1); 
scene.add(centerLight) ; 
centerLight.position.set(2500, 300, 2000); 
centerLight.penumbra = 1; 
centerLight.decay = 5; 


7. Animated lights 
The next two lights to be added. ‘PointLight’ and 
‘PointLight2’ are coloured lights that will circle in opposite 
directions around the scene so that the light changes 
constantly in the view. The first is a pink light and the 
second is an orange light. The path and format for the 
reflection images are set in the last two lines. 

pointLight = new THREE.PointLight(Qxe@7bff, 

ile s> 

pointLight.position.z = 200; 

scene.add(pointLight) ; 

pointLight2 = new THREE.PointLight (Oxff4ed0, 

1 PRE 

pointLight2.position.z = 20Q; 

scene. add(pointLight2) ; 

var path = “img/”; 

var format = ‘.jpg’; 


8. Shiny surfaces 

The liquid surface will have a reflective, shiny surface and 
this is done by creating a reflection cube. This is a cube 
with a 360-degree skybox placed inside it, which will be 
reflected onto the surface of the liquid. The ‘urls’ array 
contains the images to be loaded, then the material 

is set up. 


9. Setting up some groups 


The mover group will contain some particles that will be 


Logo light effects 


By making the logo a ‘double sided’ material, the 
lights affect it on the front and back as they move 


around the scene. 


Top 

Adding in the logo, which is a transparent PNG image, places 
this in the centre of the scene, and is easy to replace with your 
own logo later. 


Right 

Every so often one of the post processing effects runs a 
glitch effect on the screen just to liven up and distort the 
screen, before returning to normal. 
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added later, while the floor group will contain the surface 
of the liquid. A new 3D object is created that will hold that 
Surface. There will be two liquid surfaces; one will have the 
reflective material and the second will have the wireframe 
‘floorMaterial’, as defined here. 

moverGroup = new THREE.Object3D() ; 

scene. add(moverGroup) ; 

var floorGroup = new THREE.Object3D(); 

var floorMaterial = new THREE. 

MeshPhongMaterial ({ 

color: @xeeeeee, side: THREE.DoubleSide, 

blending: THREE.AdditiveBlending, wireframe: 

true 

iy 

floorGeometry = new THREE. 

PlaneGeometry(FLOOR_WIDTH + 1200, FLOOR_ 

DEPTH, FLOOR_RES, FLOOR_RES) ; 


10. Making the surfaces 
The two liquid surfaces are created here as ‘floorMesh’ 
and ‘floorMesh2”. They are positioned and placed inside 
the floorGroup’ then rotated to a good viewing angle in 
front of the camera. This isn't directly flat, but slightly 
angled as it looks better like that. 
var floorMesh = new THREE. 
Mesh(floorGeometry, cubeMaterial); 
var floorMesh2 = new THREE. 
Mesh(floorGeometry, floorMaterial); 
floorMesh2.position.y = 20; 
floorMesh2.position.z = 5; 
floorGroup.add(floorMesh) ; 
floorGroup.add(floorMesh2) ; 
scene. add(floorGroup) ; 
floorMesh.rotation.x = Math.PI / 1.65; 
floorMesh2.rotation.x = Math.PI / 1.65; 
floorGroup.position.y = 180; 


11. Adding floating particles 

The section of code here creates an empty geometry 
object and then places into it 2.000 vertices that act as 
the particles. These are distributed at random positions 
on the X, Y and Z axis. These will float just above the 


Surface of the liquid floor. 

pGeometry = new THREE.Geometry(); 

sprite = textureLoader.load(“img/sprite. 

png”) ; 

for (i = @; i < 2000; i++) { 
var vertex = new THREE.Vector3(); 
vertex.x = 4000 * Math.random() - 2000; 
vertex.y = -200 + Math.random() * 700; 
vertex.z = 5000 * Math.random() - 2000; 
pGeometry.vertices.push(vertex) ; 


i 


12. Creating the look 

The material defined here will set how the particles look. 
An image was loaded in the previous step and that is 
used as the image on each particle, once the material is 
created. This is then applied to each point of the 
geometry for all of the particles. These are then added 
into the scene. 


13. Adding the logo 


A logo will be placed into the centre of the screen and this 
will be added onto a flat plane that will face the camera. 
The logo is made slightly transparent and given an 
additive blend so that it is more visible when lighter 
objects pass behind it. This is positioned and placed into 
the scene. 

sprite = textureLoader.load(“img/logo. png”) ; 

geometry = new THREE. 

PlaneBufferGeometry(500, 640, 1); 

material = new THREE.MeshLambertMaterial ({ 

transparent: true, opacity: 2.8, blending: 

THREE.AdditiveBlending, map: sprite, side: 

THREE .DoubleSide 

Ds 

var plane = new THREE.Mesh(geometry, 

material); 

plane.position.set(@, 70, 1800); 

scene. add(plane) ; 


14. Adding the render settings 


The renderer is set up to have smooth, anti-aliased edges 
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This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders 
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o Shaping functions 


and now the background colour is set. This is added into 
the body of the document so that the scene is on the 
HTML page. The post processing effects are set up by 
having various render and shader passes initialised. 


15. Making the pass 

Once the film and glitch pass are added, an effect 
composer is created that composes all of the passes 
together. These are added one by one to the composer 
and it will eventually be rendered out to the screen for 
audience display. 


16. Closing the ‘init’ function 

The last few settings are added for the initialisation of the 
scene. The parameters for post processing are set, the 
setting of the waves is called and an event listener is 
added for whenever the browser is resized. This enables 
the display to be updated to fit the new dimensions. 


17. Setting up the waves 
The waves are created now for the surface of the liquid. 
This is done by moving through each vertex of the floor 
geometry on the x and z axis and moving it Upward on 
the y axis. At this stage the ‘for loops are created for the 
x and Z axis 
function setWaves() { 
stepCount++; 
moverGroup.position.z = -MOVE_SPD; 
var i, ipos; 
var offset = stepCount * MOVE_SPD / 
FLOOR_DEPTH * FLOOR_RES; 
for (i = @; i < FLOOR_RES + 1; itt) { 
for “(vary =O: 3) < FLOORLRES + 1? 94) 4{ 
ipos = i + offset; 


18. Making waves 


Not all the vertices will be scaled upwards in the same 


way. Those furthest away from the camera will be large, 
then the sides will be slightly less, and those nearest the 
camera will be scaled the least. This makes the back and 
sides slightly more interesting to look at 
af Ci 30) NNT 2) Gp 48) =k 
floorGeometry.verticesLi * (FLOOR_RES + 1) 
+ j].z = snoise.noise(ipos / FLOOR_RES « 
noiseScale, j / FLOOR_RES x* noiseScale, 
noiseSeed) * FLOOR_HT; 
} else if (i > 25 && i < 30) { 
floorGeometry.verticesLi * (FLOOR_RES + 1) 
+ j].z = snoise.noise(ipos / FLOOR_RES « 
noiseScale, j / FLOOR_RES x* noiseScale, 
noiseSeed) * (FLOOR_HT / 1.2); 
} else { 
floorGeometry.verticesLi * (FLOOR_RES + 1) 
+ j].z = snoise.noise(ipos / FLOOR_RES * 
noiseScale, j / FLOOR_RES x* noiseScale, 
noiseSeed) * (FLOOR_HT / 2); 
3 
} 
3 


floorGeometry.verticesNeedUpdate = true; 
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19. Resizing and animating 
When the window is resized, the function here is called 
from the listener that was set up in step 16. The camera, 
renderer and composer are all reset in here to match the 
new dimensions of the window of the browser. The 
animate function just sets itself at 6Ofps, calling the 
render function to update the display. 
function onWindowResize() { 
camera.aspect = window.innerWidth / 
window. innerHeight; 
camera.updateProjectionMatrix() ; 
renderer. setSize(window. innerWidth, 


Post processing 
and shaders 


Getting a good looking 3D 
scene is not just about the 
content that goes into the 
scene. Sure, a great looking 3D 
model will always look good 
onscreen, but part of the way 
it can be enhanced and made 
to look even better is through 
post processing. What this 
does is take the entire screen 
display and runit througha 
shader. A shader is a very fast 
process that runs on your 
graphics card where all the 
pixels are affected at once 
with what the shader has been 
told to do. This scene uses five 
shaders. The first two are the 
tilt shift, so a shader is run for 
both horizontal and vertical 
blur. Then a slight film grain is 
added, a vignette and finally 
an occasional glitch effect. If 
you want to learn more about 
shaders check out https:// 
thebookofshaders.com. 


window. innerHeight) ; 
composer. setSize(window. innerWidth, 

window. innerHeight) ; 

3 

function animate() { 
requestAnimationFrame(animate) ; 
render (); 
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20. Every frame of action 
The render function is called every frame. The point lights 
are set to orbit around in the scene and the camera is 
positioned according to the mouse movement, with a 
little easing so that it moves gradually into place. The 
camera is set to always look at the centre of the scene. 
function render() { 
var timer = -@.0002 *« Date.now(); 
pointLight.position.x = 240@ * Math. 
cos(timer) ; 
pointLight.position.z = 240@ * Math. 
sin(timer) ; 
pointLight2.position.x = 1800 * Math. 
cos(-timer * 1.5); 
1800 * Math. 


pointLight2.position.z 
sin(-timer * 1.5); 

camera.position.x += (mouseX - camera. 
position.x) * .@5; 

camera.position.y += (-mouseY - camera. 
position.y) * .Q5; 

camera. lookAt(scene. position) ; 


21. Final steps 

In the final step the particles are moved forward on their 
individual vertex, and if they get to the camera, they are 
placed back into the distance. This is updated and the 
setWaves function is called to make the waves roll 
forward. The scene is rendered by the effects composer. 
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Inspired by tentwenty.me 


The Company logo Simple navigation 

The website company logo is _ Amore traditional navigation option 
always visible over the navigation. is available by clicking on the 

This is used in design strategy for hamburger icon to presenta 
supporting brand recognition. : simpler, to-the-point menu. 
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Navigation image -« Option subtitle text Hovered navigation 
Highlighted navigation options Subtitle appears positioned The navigable columns 

are accompanied by an in a location that avoids change colour when hovered 
associated image that describes conflict with the navigation by the user pointer. This could 
the theme of the highlighted image. Size and colour be used to help users to 
option’s content. make it clear to read. distinguish each option. 
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Layout Design: Less is more 

While adding visual effects may look appealing, it’s important to develop a 
content layout strategy that supports your content’s objectives. Consider how 
you can avoid overcomplicating your design to a point that distracts your 


<comment 
sxoertetin, | Visitors from navigating to the content you want them to read. 
of the site | Leon Brown - Freelance web developer and trainer 


Technique 
1. Initiate HTML document 


The first step is to initiate the HTML document; defining 
the HTML container, which contains head and body 
sections. While the head section is used to store 
non-content elements, such as the reference to load the 
CSS stylesheet, the body section is used to store visible 
content created in Step 2. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Animated Menu Navigation</title> 

<link rel=’stylesheet” type="text/css” 

media=”screen” href=”styles.css”/> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. Navigation HTML 


The navigation element is defined with HTML5’s nav 
container to store the individual link items. Each of the 
links has the visible text wrapped inside a span element. 
This approach provides the ability for CSS to reference 
while keeping the HTML clean. 

<nav> 

<a href=”"#’><span>One</span></a> 

<a href=”#’><span>Two</span></a> 

<a href=”#’><span>Three</span></a> 

</nav> 


3. Initiate CSS stylesheet 


With the HTML now complete, create a new file called 
‘styles.css. The first rules in this file set the HTML 
container and its body to display across the full browser 
window/screen. A black background is also applied, along 
with a guarantee for no visible border spacing. 

body, html { 

display: block; 

width: 100%; 

height: 100%; 

background: #000; 

padding: Q; 

margin: Q; 
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4. Navigation container 

The navigation should be set to cover the full size of its 
parent element - that is, the previously defined body. A 
display mode of table is also used so that the widths of its 


first level children can be automatically calculated. 
nav{ 
display: table; 
height: 100%; 
width: 100%; 
if 


5. Navigation links 
Each of the navigation links act as a container for 
addition child content - a soan element in this case. We 
want automatic calculation of their width, hence a 
‘table-cell’ display mode. They are also set to cover the 
full height of their parent. 

nav af{ 

position: relative; 

display: table-cell; 

height: 100%; 

color: #fff; 

font-size: 3em; 

overflow: hidden; 
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6. Image preparation 
CSS allows every element to have an associated “before” 
and ‘after element to be created for HTML elements. This 
step defines the default size and positioning images 
associated with the links to be out of view. Transition is 
set to animate changes to bottom and opacity. 
nav a::beforef{ 

position: absolute; 

display: block; 

content: “”; 

color: #000; 

font-size: lem; 

bottom: -10em; 

left: Q; 

width: 100%; 

height: 75%; 

background: no-repeat center center; 

background-size: cover; 

Opacity: Q; 

transition: bottom 1s, opacity .5s; 
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7. Navigation link hover 
Changes to hovered navigation links are defined using 
the ‘hover’ selector. Navigation containers have their 
colours changed, while the previously defined ‘before 
images have their opacity and vertical positioning set to 
become fully visible - animated due to the transition 
defined in Step 6. 

nav a:hover{ 

background: #fff; 


color: #000; 

J 

nav a:hover: :before{ 
opacity: 1; 

bottom: Q; 

J 


8. Navigation images 
Each of the navigation images require an image to be 
associated with their ‘before’ element. The ‘nth-child’ 
selector is used to apply unique images to each of the 
navigation link elements to avoid the need for these to 
be defined in the HTML. 

nav a:nth-child(1): :before{ 

background-image: url(imagel. jpg) ; 

b 

nav a:nth-child(2): :beforef{ 

background-image: url(image2. jpg) ; 

ii 

nav a:nth-child(3): :before{ 

background-image: url(image3. jpg) ; 

} 


9. Content positioning 
Span elements used to contain visible text are set with 
absolute positioning in relation to their parent container, 
which uses relative positioning. A transition is applied to 
animate positioning changes with a slight delay. The 
Span’s position changes when the parent container is 
hovered over by the user. 

nav a > span{ 

position: absolute; 

display: block; 

top: 50%; 

transition: top 1s; 


transition-delay: .25s; 
3 

nav a:hover > span{ 
top: 10%; 

} 
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Build a web form 
with great UX 


Discover the techniques and best practices to create a highly- 
optimised UX which works effectively across device types 


Want to be an Want to be an 


ASTRONAUT? ASTRONAUT? 


Apply below Apply below 


P _# 


0% Complete 0% Complete 


Date of birth Date of birth 


Contact Number @ Contact Number @ 


ny kind of web form has an objective in 
mind for its users, from something as 
simple as sending a contact email, to 


completing a complex financial 
application. When the user achieves this objective, it’s 
typically referred to as a ‘conversion’ in the analytics 
world, with the total number of conversions showing 
stakeholders how well the web form is performing. 

As designers and developers, it’s our responsibility to 
help the web form get as many conversions as possible. 
One way to co this is to make its User experience (UX) 
effective enough that the user can get from start to finish 
frustration-free, no matter what device they're using. 

In this tutorial, we'll be building a simple web form with 
a great UX in mind. We'll be optimising the form for 
multiple screens and input types, refining the inputs on 
show, as well as presenting the user with helpful 
information to streamline their data entry. 

To get started, download the files from Filesilo and 
open ‘website-template’ in your text editor. Then in 
terminal, CD into ‘website-template’ and run ‘nom install’. 
Next, run ‘nom run watch’ to build the project and watch 
for any changes so that it can be rebuilt. Finally, open a 
new terminal window and then run ‘nom run serve’ to 
Start up a dev server at ‘localhost:8080° which you 
Should open in a browser. 


1. Add a basic text input 

From the Filesilo package, open ‘supportfiles/step-O1.txt 
and then copy and paste its content into your website 
template file ‘dev/index.html’, replacing the ‘Form goes 
here text. This enables the web form user to enter their 
name using a simple text input. 


2. Input validation overview 

Let’s add real-time validation to any inputs with invalid 
values so they are flagged straight away. Replace the 
HTML added in the previous step with the HTML from 
‘support-files/step-O2 txt’. This adds the ‘required’ 
keyword, which triggers native DOM validation, and also 
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two new data attributes. The first one is called 
‘data-required-text’, and stores the error message to be 
displayed for a missing value. The second is called 
‘data-linked-input? which contains the name of the input 
the error message container should link to. 


3. Building validation 
function - part1 
Add the snippet below to ‘dev/js/mainjs. This builds the 
foundations of the validation function. Specifically, we're 
grabbing all the inputs on the page and then, once the 
Submit button is clicked, looping through and passing 
each one to the (currently) empty ‘validate’ function. 
(functionO{ 
let inputs = document 
.querySelectorAllC“input”), i, 
validate = function(input) { 
3 
document.querySelector(“button[type=’subm 
it’]”) 
.addEventListener(“click”, function(d) { 
forG = @; i < inputs.length; i++) { 
validate(inputs[i]); 
} 
document.querySelector 
(“Laria-invalid=’ true’ ]”).focusQ; 


Ye YO; 


4. Building validation 

function - part 2 

Next, add the code (see FileSilo) below underneath the 
Submit button event listener. We're looping through all 
inputs again and doing two things. First, adding an event 
listener for the ‘invalid’ event, which cancels its default 
behaviour. This stops the browser's default error message 
boxes from appearing. Second, were adding an event 
listener for the ‘change’ event and then, when detected, 
passing the input to the validation function. This is how 
the real-time validation is triggered, as the change event 
fires when the input receives a value. 


qradient (12 
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5. Building validation 
function - part3 
In the empty validation function, we'll get the error 
container belonging to the input we've passed to the 
function using its ‘data-linked-input’ attribute. If this 
container element exists, and the native ‘checkValidity’ 
function returns false, trigger the appropriate error state 
on the input using the ‘aria-invalid’ attribute. Finally, we'll 
then determine which message to show in the error 
container element, based on the type of validation error 
recorded in the input’s ‘validity’ object. If the error were 
simply a missing value, the last ‘else’ statement would 
trigger and use the ‘data-required-text’ error message. 
let message = document.querySelector 
(‘[data-Linked-input=’ ${input.name}’ ]*‘); 
if(!input.checkValidityQ) && message) { 
input.setAttribute(“aria-invalid”, ‘“true’’); 
message.classList.add(“is-active”); 
message.setAttribute(“aria-hidden”, 
“false” ): 
if(input.validity.patternMismatch) { 
message.innerText = 
input.dataset.patternMismatchText; 
3 
else if(input.validity.typeMismatch) { 
message.innerText = 
input.dataset.typeMismatchText; 
} 
else { 
message.innerText = 
input.dataset.requiredText; } } 


Simplify and 
merge inputs 


Where possible, try to merge related inputs so 


users have less to complete. An example would be 
‘Title’, ‘First Name’, and ‘Surname’. This can be 
merged into one field called ‘Name’ and then 
programmatically separated after submission. 
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Left 

Most modern browsers with a web inspector have a 
device mode where you can easily simulate how your 
web form appears on mobile and tablet devices. In 
Google Chrome, this can be activated by clicking the 
mobile/tablet icon. It’s then just a matter of selecting 
your desired device. 


Top 

It’s important that a web form is usable on the smallest 
320px device (For example: iPhone 5) to the largest 
desktop environment (Think iMacs, large monitors etc). 
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6. Building validation 
function - part 4 
Add the below snippet after the previous step’s 
‘checkValidityO’ ‘if statement. This adds logic so when an 
input passes validation, the input’s error state is removed, 
alongside any error messages. 
else if(message) { 
input.setAttribute(“aria-invalid”, “false”); 
message.classList.remove(“is-active”); 
message.innerText = “”; 
message.setAttribute(“aria-hidden”, “true’”); 


} 
7. Add date of birth inputs 


Copy the HTML from ‘support-+files/step-O7txt’ and add it 
just after the name input. You may notice a ‘pattern’ 
attribute in use here. This accepts a regex pattern, which 
the DOM validation uses to check if our input’s value is in 
the desired format. In this case, checking if only two 
numbers are entered for ‘day’ and ‘month’, and four 
numbers for ‘year. If a match isn't found, the text within 
the input’s ‘data-pattern-mismatch-text’ attribute is used 
as the error message, as per Step 5. 


8. Improve date of birth inputs 
Let's add some functionality specifically for date-of-birth 
inputs to ‘dev/js/mainjs, so when you enter a value in 
either day or month which matches its expected length, 
the focus automatically transitions to the next input. 
(function?) { 
var inputs = document.querySelectorAll 
(“H#bday-day, #bday-month”); 
for(var i = 0; i < inputs.length; i++) { 
inputs[i].addEventListener 


Using whitespace 


Be sure to add some whitespace around inputs to 
help users distinguish one input from the next. If 


inputs are too close together, it can be visually 
overwhelming - similar to reading a big block of 
text without paragraphs. 


Fare in the Sky 


GO BACK 


Above and right 

When multiple call-to-action buttons are present on a form, 
it’s important to think about their colours. Here, both 
‘Submit’ and ‘Go Back’ have the same blue background, 
and, therefore, the same level of prominence. 

In this second screenshot, only the ‘Submit’ button has 
the blue background, whilst the ‘Go Back’ button has a less 
prominent grey background. This establishes a visual 
hierarchy in the user’s mind, and conveys that ‘Submit’ is 
the more important action, which in this context is what 
we want them to think. 
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“input”, functionO{ 
if(this.value.length === 2) { 
this.nextElementSibling.focusQ); 
} 

D 

F303 


9. Add contact number input 
Below the date-of-birth inputs, add the HTML from 
‘support-files/step-O9txt? This adds a contact number 
field and an accompanying tooltip, which contains a 
statement clarifying how this data will be used. 


10. Add tooltip functionality 


At the moment, clicking the tooltip makes the message 
show, but as soon as the focus changes to the next 
element it vanishes. Let’s add some JavaScript so when 
the info icon is clicked, the tooltip shows until the user 
clicks it again. Add the snippet below to ‘dev/js/main.js 
§ § (functionO{ 

let tooltips = document. 


, 


querySelectorAll(“.c-tooltip”), i; 
forG = @; i < tooltips.length; i++) { 
tooltips[i].addEventListener 
(“click”, function() { 
this.classList.toggle(“is-active”); 
i: 

tooltips[i].addEventListener 
(“keypress”, function(e){ 
if(e.which === 13) { 
this.classList.toggle(“is-active”); 
3 

DD; 

Pa O5 


11. Add a secondary contact 
number input 

Just below the contact number input’s error container, 
add the HTML from ‘support+files/step-11txt. This adds 
an optional additional contact number input to the web 
form, which is only displayed if the user clicks the ‘Add a 
backup number link. 
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12. Add email address input 
Next, we'll add a new input to capture the user’s email 
address. Add its HTML from ‘supportfiles/step-12. txt? 
below the two contact numbers. Some types of inputs 
already have validation rules associated with them by 
default, so they don't require a pattern attribute. For 
example, with an email input, the ‘type-mismatch’ error 
gets triggered when its value isnt formatted like an email 
address. Add the attribute below to the input and its value 
will be used as the error message whenever a 
type-mismatch error Occurs. 
| data-type-mismatch-text=”Your email address 
isn’t valid” 


13. Add radio inputs 


Let’s introduce some radio inputs to the web form 
through a multiple choice question. It's HTML can be 
found in ‘support-files/step-13.txt’ and should be added 
below the email address input. 


14. Improve form accessibility 

Can users who need to browse the Internet with a 
keyboard successfully use the form? Currently, the 
answer iS no, since they cant select any of the radio 
buttons. To change this, let’s add some JavaScript to ‘dev/ 
js/mainjs So when a user presses the Enter key on an 
in-focus radio button, it selects it. 


15. Add optional question field 
Let's add another text input, which in the next step we'll 
use as a vehicle to demonstrate a UX improvement. For 
now, let’s just add its HTML to ‘index.html after the 
previous radio button inputs. As with the secondary 
contact number, it’s labelled as an optional field since 
most other inputs are required. 
<div class=”u-margin-bottom-reduced”> 

<div class=”u-margin-bottom-tiny’’> 

<label class=’c-type-charlie u-bold” 

for=”alien-movie’’> 

Your favourite alien movie? 

<em>(Optional)</em> 

</label> 


SUBMIT APPLICATION 


RONALU 


Apply below 


o% Complete 


Please provide your name 


Date of birth 


Please provide a day of birth 


~ Please provide your name, You are currently on a text feld. To enter 
text in this field, type. 


Contact Number @ 


</div> 

<input type=”text” id=’alien-movie” 

name=”alien-movie” class= 

“c-input-text u-margin-bottom-smal]” 

placeholder=”Eg: Plan 9 from Outer Space’> 
</div> 


16. Add popular responses HTML 
Adding the Step 16 (see FileSilo) snippet underneath Step 
15's input element adds a new section called ‘Popular 
Responses. The thinking behind this functionality is that it 
provides a helpful list of common responses (In a live app, 
this would be data driven) to give the user possible 
answers they could use. Each <li> element represents a 
new option, so add as many as you want. 


17. Add popular responses logic 
Next, we need to add the logic for the popular responses 
functionality. This is done by adding a click event listener 
to all elements with the ‘data-popular-response’ attribute, 
and then using the attribute's value to find and then 
update the correct input element in the DOM. Add the 
snippet from FileSilo to ‘dev/js/main,s. 


18. Supporting autocomplete 

Many modern browsers are smart enough to analyse a 
web form's inputs and match any stored autocomplete 
data. It’s not perfect, though, and occasionally makes 
mistakes. Let's make this process easier for browsers by 
including autocomplete for some attributes. 


19. Adding a progress bar 

Now we've added all the form's inputs, another way we 
can improve the general UX is by adding a progress bar, 
which displays a percentage complete value based on 
the amount of required inputs with valid values. Between 
the <header> and <main> elements. 


20. Progress bar logic 


To make the progress bar work, we need to calculate a 
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Form accessibility 


When designing a web form, 
remember to account for 
accessibility. For example: 

The use of the ‘tabindex’ 
attribute to make elements 
focusable - and clear visual 
outlines when in focus - 
enables the web form to 
be navigated using only 
the keyboard. 

Using ‘example’ instead 
of ‘eg’ in placeholders also 
makes sense when spoken 
by screen reader, sinc this 
makes it much clearer for 
non-native speakers. 

For questions which 
involve multiple user inputs 
- such as date of birth - the 


For validation errors, the 
use of the ‘aria-described- 
by’ attribute on the input 
enables screen readers to 
read out validation errors. 

If errors are flagged on 
submit, the first invalid input 
is automatically focused. 
This is useful for users with 
screen readers to get them 
where they need to be. 

Including visually hidden 
text in tooltips which adds 
context for users with 
screen readers - such as the 
tooltip’s content - and the 
input it belongs to. 

See these improvements 
for yourself by browsing the 


for this nuance. 


percentage complete value for its text content and bar 
width. This is done by comparing the current number of 
valid required inputs against the total number of required 
inputs. In ‘dev/js/mainjs, add the following snippet to grab 
references to elements we'll be using. 
(function?) { 
let progressBar = document. 
querySelector(“.js-progress-bar’”’), 
progressBarPercentage = document. 
querySelector(“.js-progress-bar- 
percentage”), 
inputs = document. 
querySelectorAll(“inputLrequired]”), i, 
totalList = [], 
validList = []; 
forG@ = @; i < inputs.length; i++) {} 
DO; 


21. Count total required inputs 
Next, let's determine the total number of required 
inputs using the ‘inputs variable from the previous 
step. Rather than simply counting the length property 
of the ‘inputs variable, we're creating a new array 
containing the names of all these inputs. This is to 
account for groups of radio inputs, which are all part 
of the same question. Add the below snippet to the 
empty ‘for’ loop from the previous step. 
if(totalList.indexOf(inputs[i].name 
totalList.push(inputsLi].name); } 


=== =f 


22. Update progress bar 

Next, we'll add a change event listener to each required 
input, which will trigger a progress bar update once the 
user enters a new value. As mentioned in Step 20, this 
requires a percentage complete value, which we can now 
calculate by populating the ‘validList array’ with the 
names of any currently valid inputs, and then comparing 
its length against the length of the ‘totalList’ array. Below 
the ‘if statement from the previous step, add the snippet 
of code shown. 


‘aria-labelled-by’ attribute 
on these inputs enables 
screen readers to account 


form with a screen reader. 
On macOS, press Cmd+F5. 
On Windows 10, press 
Windows+Ctrl+N. 


inputs[i].addEventListener 
(“change”, functiond { 
if(this.getAttribute 
(“aria-invalid”) === “false” && 
validList.indexOf(this.name) === -1) { 
validList.push(this.name); 
3 
else if(this.getAttribute 
(“aria-invalid”) === “true” && 
validList.indexOf(this.name) !== -1) { 
validList.splice 
(validList.indexOf(this.name), 1); 
3 
let percentage = Math.round(validList. 
~ length 
| / totalList.length « 100) + ‘%’; 
progressBar.style.width = percentage; 
progressBarPercentage 
.innerText = percentage; 


3 


23. Make progress bar 
stick to viewport 
Let's add some finishing touches to the now working 
progress bar. By adding a ‘c-sticky-container class to the 
‘<aside> element, this will add a ‘position:sticky’ CSS 
property, which means the element stays at the top of the 
viewport once the user scrolls past its initial placement. 
If you then open ‘dev/sass/components/_ components. 
progress-bar.scss and add the code snippet below to 
the bottom, the text portion of the progress bar will be 
hidden on smaller devices in landscape view, freeing 
up more screen real estate. 
@include mq($until: md , $and: 
‘(orientation: landscape)’) { 
.c-progress-bar__bar { 
margin-bottom:@; 
i 


.c-progress-bar__label { 


Is 


display:none; 
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To advertise here contact Chris 


chris.mitchell@futurenet.com 
+44 (0)1225 687832 


HOSTING LISTINGS 


@) tidyhosts 


Featured host: tdyhosts 


wwwtidyhosts.com /05603 674610 


About us 


Tidyhosts has become a leading 
cloud hosting provider throughout 
the world. It boasts a feature-rich 
selection of services including domain 
registration, shared web hosting, 
WordPress hosting, hosted exchange 
email, cloud virtual servers and media 
streaming. Its passion and drive for 


What we offer 

- Domain names - Simple 
domain registration with a 
large choice of TLDs 


- Shared web hosting 
- Includes one-click 
application installers and a 
choice of Windows or Linux 


5 Tips from the pros 


1. Ensure that you choose the 
right domain 

When choosing your domain, make 
sure it’s easy to remember and 
resembles what you are offering. 
Customers are more likely to come 
back if they can remember your URL. 


2. Create clear, concise 
website content 

Keep the content on your website 
Clear, informative and, more 
importantly, relative! Avoid any 
duplication of content on different 
pages as this can affect your rankings 
on search engines. 


3. Utilise SSL certificates to 
stay secure 
More sites are moving to SSL security 
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Success has gained it a highly reliable 
and trusted reputation from its 
customers, making it the number one 
for hosting services. Founded in 2004 
by three developers who wanted to 
build hosting infrastructure for 
developers - years on, the company 
has expanded to offer much more. 


- Cloud virtual servers - Take 
full control over your hosting, 
and install the software you 
need on your server 


¢- SHOUTcast hosting - Start 
your own radio station with 
our easy to set up and use 
SHOU Icast hosting service 


to protect their customers from the 
ever-increasing threats on the web. 
Search engines are now ranking sites 
with an SSL higher than those without. 


4. Make sure you choose the 
right plan 

When you are ready to purchase 
hosting, check that you have enough 
resources, especially if you expect 
your website to grow quickly. Seek 


advice from tidyhosts if you are unsure. 


5. Use one-click installers 
when building a website 

If you are new to building a website 
then we have a number of useful 
one-click application installers. These 
help you get up and running, including 
the popular WordPress system. 
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Testimonials 


Kelly Underwood 


** ve been with a number of web host providers in the past which have at 
some point let me down. | now realise the importance of using a host that is 
well known ” 


John Corey 
** We have our email hosted with tidyhosts, which serves a small number of 
users in our office. We have found this solution is much more cost-effective ” 


Jenny Brice 


** A great host with fantastic knowledge. | have only had to use the 
Support channels a few times, but the replies | have had helped me instantly, 
SO well worth it ” 


To advertise here contact Chris 


chris.mitchell@futurenet.com 
+44 (0)1225 687832 


Supreme hosting 
OCWCS ancsses. 


PASSED HOSTING 
WWW.CWCS.CO.UK 
08001777 000 
CWCS Managed Hosting is the UK’s 
leading hosting specialist. [hey offer a | 
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fully comprehensive range of hosting 
products, services and support. Their 

highly trained staff are not only hosting 
experts, they're also committed to 
delivering a great customer experience | 
and are passionate about what they do. | 


- Co-location hosting 
- VPS 


- 100% Network uptime Budget hosting 
UK-based hosting = ONLINE__ 

| | www.hetzner.com 

ee CYBERHOST | +49 (0)9831505-0 


| Hetzner Online is a professional web 

| hosting provider and experienced data 

| centre operator. Since 1997, the company 
has provided private and business clients 


www.yberhostpro.com 
0845 5279 345 


Cyber Host Pro are committed to 
providing the best cloud server | 
hosting in the UK; they are obsessed | 
with automation. If youre looking for a | 
hosting provider who will provide you — | 
with the quality you need to help your | | 
business grow, then look no further | 

| 


than Cyber Host Pro. 


¢- Cloud VPS servers | 
- Reseller hosting q 
- Dedicated servers | 


Cluster web hosting 


Get your listing in our directory 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 
of stable technology, attractive pricing, 
flexible support and services has enabled 
Hetzner Online to strengthen its market 
position both nationally & internationally. 


- Dedicated/shared hosting 
¢« Colocation racks 
- SSL certificates 


fasthosts 


wwweasthosts.co.uk | 
0808 1686 777 | All-inclusive hosting 
UK based and operating 24/7 from | 
dedicated UK data centres. Fasthosts | 
keep over one million domains running | 
smoothly and safely each day. | 
Services can be self-managed through | www.land1.co.uk 
0333 336 5509 
| 1&1 Internet is a leading hosting 

| provider that enables businesses, 
| developers and IT pros to succeed 

online. Established in 1988, 1&1 now 


the Fasthosts Control Panel. 


- Dedicated servers 
- Cloud servers 
- Hosted email 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 
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<> bargainhost 


www.bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database which includes 
many repeat customers. They have also 


~ won several awards for providing an 


outstanding hosting service. 


- Shared hosting 


-« Cloud servers 


« Domain names 


Value Linux hosting 


PATCHMAN 
WEB HOSTING 


patchman-hosting.co.uk 
01642 424 237 


Linux hosting is a great solution for 


' home users, business users and web 


designers looking for cost-effective and 
powerful hosting. Whether you are 
building a single-page portfolio, or you 
are running a database-driven 
eCommerce website, there is a Linux 


hosting solution for you. 


-. Student hosting deals 
_« Site designer 
_+ Domain names 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 
high performance, availability and 
scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
email and ticketing system. 


- Cloud servers with any OS 
- Linux OS containers 


_« 24/7 expert support 
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backgrounds and more HTML, CSS, JS & PHP’ to follow our tutorials master this issue’s HTML, CSS 


and JavaScript techniques 

* Over 98 minutes of expert VR & 
JavaScript video from Pluralsight 
(www.pluralsight.com) 

* 30 Cheerful triangle patterns 
(www.sparklestock.com) 

* Hope poster Pop Art generator 
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i: Log in to www.filesilo.co.uk/webdesigner 
Register to get instant access | 
to this pack of must-have 


creative resources, how-to 
videos and tutorial assets 


The home of great 
downloads — exclusive to 
your favourite magazines 
from Future! 


f) Secure and safe online 


\— access, from anywhere 


f) Free access for every 
Q reader, print and digital 


f) Download only the files 


\ you want, when you want 


f°) All your gifts, from all your 
Q issues, in one place 


Everything you need to 
Know about accessing 
your FileSilo account 


Follow the instructions 

on screen to create an 
account with our secure FileSilo 
system. Log in and unlock the 
issue by answering asimple 
question about the magazine. 


: | i | 
You can access FileSilo 


on any computer, tablet 
or smartphone device using any 
popular browser. However, we 
recommend that you use a 
computer to download content, 
as you may not be able to 
download files to other devices. 


If you have any 
problems with 
accessing content on FileSilo, 
take a look at the FAQs online 
or email our team at the 

address below. 
filesilohelp@futurenet.com 


Subscribe today & unlock the free 
gifts from more than 50 issues 


Over 210 
creative assets 


More than 
400 tutorials 


Over 60 hours 
of video guides 


DEVELOPMENT 


Designing the animation test environment 


Head to page 14 to subscribe now 


‘| Already a print subscriber? 
a yap =e 


(" 
More 
Unlock the entire Web Designer FileSilo library with your added 


unique Web ID — the eight-digit alohanumeric code printed eve 
above your address details on the mailing label of your ssue 
subscription copies — also found on any renewal letters. 
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Learn how to use CSS variables to : Discover how to increase site visitor numbers — : Bring together the impressive JavaScript 
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Media Temple web hosting delivers premium performance and 
support so that creative professionals and enterprises can 
focus on bold ideas, not web servers. 


mediatemple.net 


| This is the moment 
when a click 


turns into a lead. 


PRESS AHEAD — 


WP Engine's digital expe e platform dri your bu s forward faster. wpengine.co.uk wPengine’ 


